最近花了一些时间对我们公司PC端首页首屏做了一次优化。下面是最终优化后的加载速度（禁止谷歌浏览器缓存情况下）
本胖还记得之前掘金热门推荐了一篇名为 性能优化只有3步，你了解吗，里面总结了3种方法，本胖感觉很好哈。第一种就是关键资源字节数，第二种是关键资源连接数，3.关键渲染路径。
本胖对我们商城首页做了一个初步分析。这次的优化首先从关键资源字节数+关键资源连接数入手，将原来首页首屏的资源由之前的85个请求减少到40个，将原来的首屏资源大小由2.3M减小到800k。最终将domcontentloaded时间减少到平均400ms以及将Load时间减少到平均600ms，初步达到了首页秒开的效果（当然和淘宝天猫还是有很大差距的）。下面本胖就从4个方面来详细记录一下这次的优化步骤，敬以此文，做一个总结。
1.轮播插件懒加载
像这样的商城首页轮播图，在天猫，淘宝，京东等最大的商城平台那是一定会有的，我们商城也不例外。这里的轮播插件一开始是用自己用js封装的。不过随着运营需求的增加，可以从上图看出目前已经有9个活动了，也就意味着一开始就会多请求并且渲染9张1920*450的大图，做web前端的都知道这意味着什么。那么本胖首先想到的就是该如何让后面这8张延迟加载。
用过swiper都知道，该插件可以很轻松的配置图片延迟加载，那么是不是把自己的插件去掉换上大名鼎鼎的swiper呢，那就是5分钟的事情，时间少效果又有了，是不是很easy呢。
但是，如果你这样做了，那么好不容易遇到的提升自己的机会就这么白白溜走了。
于是，本胖就想在本胖之前写的插件上面加上和swiper一样的高大上的懒加载功能。
懒加载其实说到底就是初始化默认不显示资源比如去掉img的src属性，那么该img就不会发送请求了，也就做到了懒加载，然后在适当的时候在去请求img对应的资源就可以了。
我们就可以在渲染插件里图片的时候将图片路径放在data-src(也可以其他不适src的自定义属性)里面，然后我们要做的就是在插件代码里面去控制什么时候去请求图片资源。我们来想一下，这样的轮播当用户点击左右或者下面的小圆点或者自动播放的时候就会请求新的图片资源。那么我们需要做的事情就是在这些事件中去将data-src改成src不就好了。不过对于第一张图片我们是需要特殊处理的，一开始就让他的data-src改成src就可。下面是代码片段截图
A.首张图片处理
B.延迟加载图片处理
当用户点击左右或者下面的小圆点或者自动播放的时候 这里做一个说明，这3种事件都是调用了move方法，所以只要改一个地方就好了。
2.统计代码以及客服代码延迟加载
首页一般都会有一些统计代码，这些代码不能没有，但是也不需要首屏的时候就加载出来。
那么就很简单，我们只要把这些代码都放在onload事件里面，然后利用settimeout这个很神奇的方法，设置一个时间比如2000ms，那么在谷歌浏览器Network你会发现一开始先有N个资源请求，过大约2000ms会又出现M个请求（这些就是统计代码等辅助代码的请求），但是Load时间却不会把这些辅助代码的请求加载时间计算进去。
这种方法，本胖可以做一个极限推断，如果本胖把延迟时间改成无穷大，那么不就是永远不会对页面首屏时间有影响了吗，有类似想法的可以一起谈论一下这方法哈。
3. 合理使用字体图标
首页这一块表面看有6个请求，其实是12个，鼠标移入是不同的图标。而且都是后台运营可以配置的。这里要说一下，其实像这里的一级分类，一段时间内（至少一个月）都不会改变，而且每次改了前端这里也要改对应的样式才能填满整个父容器。那么这里就不应该做成可配置的，而是要前端控制。
这时候，本胖就想到了用字体图标来替换这些请求图片。下面来介绍一下如何用字体图标。
本胖这次用的是字体图标最原始的unicode应用方式。
unicode是字体在网页端最原始的应用方式，有以下特点:
1.兼容性最好，支持IE6+，以及所有现代浏览器
2.支持按字体的方法去动态调整字体大小，颜色等。
3.但是因为是字体，所以不支持多色。
unicode使用步骤如下：
第一步：拷贝项目下面生存的font-face
第二步：定义使用iconfont的样式
第三步：挑选相应图标并获取字体编码
还有其他很多应用的方法，可以参考这里 www.iconfont.cn/help/detail…
4.除了首屏外下面的资源都延迟加载
先来看一下爱奇艺首页加载，因为这次本胖采用的就是爱奇艺首页加载的策略。
可以看到除了首屏外，下面的资源都是一开始显示loading图，当进入用户视线的时候才去加载这一块的整体资源，比如这里面的html结构，图片资源，js资源等，注意css是一开始统一加载的哦。这一点可以从下面的截图中得到印证
这上面的data-block-url就是该频道渲染好的结构地址。爱奇艺是采用inc的方式存储资源的。
有没有感觉这种加载方式和图片懒加载很想呢，只不过是把图片url缓存频道资源url，是不是有种代码是不同的，思想是一样的感悟呢！
本文完
