一次PC商城首屏优化的总结

最近花了一些时间对咱们公司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个，鼠标移入是不一样的图标。并且都是后台运营能够配置的。这里要说一下，其实像这里的一级分类，一段时间内（至少一个月）都不会改变，并且每次改了前端这里也要改对应的样式才能填满整个父容器。那么这里就不该该作成可配置的，而是要前端控制。

这时候，本胖就想到了用字体图标来替换这些请求图片。下面来介绍一下如何用字体图标。

http://www.iconfont.cn/，这是阿里的字体图标网站，作的很好。里面有不少已经定义好的字体图标，若是没有满意的，能够本身上传svg而后就能够下载对应的字体图标了。

本胖此次用的是字体图标最原始的unicode应用方式。

unicode是字体在网页端最原始的应用方式，有如下特色:

1.兼容性最好，支持IE6+，以及全部现代浏览器

2.支持按字体的方法去动态调整字体大小，颜色等。

3.可是由于是字体，因此不支持多色。

unicode使用步骤以下：

第一步：拷贝项目下面生存的font-face

@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }

第二步：定义使用iconfont的样式

.iconfont{ font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}

第三步：挑选相应图标并获取字体编码

3

还有其余不少应用的方法，能够参考这里 http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.14&helptype=code

4.除了首屏外下面的资源都延迟加载

先来看一下爱奇艺首页加载，由于此次本胖采用的就是爱奇艺首页加载的策略。

能够看到除了首屏外，下面的资源都是一开始显示loading图，当进入用户视线的时候才去加载这一块的总体资源，好比这里面的html结构，图片资源，js资源等，注意css是一开始统一加载的哦。这一点能够从下面的截图中获得印证

这上面的data-block-url就是该频道渲染好的结构地址。爱奇艺是采用inc的方式存储资源的。

有没有感受这种加载方式和图片懒加载很想呢，只不过是把图片url缓存频道资源url，是否是有种代码是不一样的，思想是同样的感悟呢！

本文完