首页手记浅析淘宝首页菜单加载

浅析淘宝首页菜单加载

标签：

Html/CSS

首先来说为什么要分析一下下淘宝首页的菜单呢？
其实我是想说说京东的首页的，因为我平时总喜欢玩玩京东首页。但是今天写这篇文章突然发现京东web端首页好像是进不去了。我们就不深究他是什么原因了。
直入主题：我们看看首页淘宝的菜单吧！
其实大家都知道淘宝首页的加载速度是相当快速的。为什么这么快呢。因为他们技术很牛逼呗。有点类似于废话了。
其实很大一部分提速源于文件的加载顺序。
那么今天我们就先说说这个加载顺序吧！

一、图片压缩
大家不难从上图看出淘宝每次被打开，其实是需要加载很多很多图片的。
首先一点，他们会做到保证图像浏览质量的情况下，最大限度的压缩图片本身大小。

上图就是淘宝在获取第一个菜单项所要加载的图片。
先从文件格式来看，我前面一直在用png的图片格式，因为他透明。可是我看淘宝会试用jpg的图片。后来我尝试转变了原来的图片格式，发现图片会被大小会降低很大幅度。所以再不是必须要求透明的情况下还是要尽量使用jpg图片（背景白色透明不透明就无所谓了）。还有就是淘宝还是用了webp格式的图片。这个应该说新出现的一种格式图片。最起码我是刚看到。他可以对图片做到有效的压缩，既能降低图片大小，又能保证一定质量。但是它并不能适应于所有的浏览器。所以如果我们采用了应该做适当的降级处理。（今天重点不在这，我们接着往下看）

二、加载顺序
其实不难从上图中看到，这是淘宝第一个菜单项所对应的内容。里面还包含了一些图片。如果用户只想看家电。如果我们把这些图片加载出来就等于，浪费了用户的时间，同时也浪费了我们的带宽和用户的流量。时间就是竞争力和利润啊，带宽就是成本啊，所以淘宝他并没有在首次时间去加载这些数据，而是在我们把鼠标移动第一个菜单项才去加载的这些子菜单和图片资源。这样就可以节省更多cpu资源去加载其他的客户第一面就能看到的东西。
为什么我这是浅析呢？因为淘宝这首页不知道是在多少个优秀工程师共同努力组建起来的。所以我也只能慢慢去膜拜他，顺便拿出来分享下。
我们来看看他的实现原理吧。他们会给每一个菜单项绑定个唯一的ID值，然后当我们手表移到上面时，他会把当前菜单项的id值通过ajax请求传给后台来获取子菜单项的数据。然后再通过js动态的将数据内容展现给我们。这应该就是他的大致流程了。
三、代码实现
<li class="xq_li">
菜单3
<ul class="xq_ul">
<li class="xq_li">
子菜单1
</li>
<li class="xq_li">
子菜单2
</li>
<li class="xq_li">
子菜单3
</li>
</ul>
</li>
这只是小小的模拟一下哈，当我们把鼠标放到菜单3这个节点上时，js就会通过ajax取出菜单3的所有子菜单，也就是线面的ul列表。
if (obj.subMenu && obj.subMenu.length > 0) {
var ul = $("<ul/>",{"class":"xq_ul"}).appendTo( thisli );
this.createMenu( obj.subMenu , ul );
};
obj.subMenu && obj.subMenu.length是用来判断是否还有子菜单。因为你也不知道他到底有没有子菜单或者他的子菜单到底到哪一步，所以我们还需要用到this.createMenu( obj.subMenu , ul );来递归的调用判断和生成子菜单。