移动前端系列——移动页面性能优化（转）

转自站酷：http://www.zcool.com.cn/article/ZMzg0NDMy.html

首先，为何要最移动页面进行优化？

纵观目前移动网络的现状，

 

 

移动页面布局愈来愈复杂，效果愈来愈炫，直接致使了文件愈来愈大，下载和运行速度愈来愈低，而速度低会形成不良影响，据统计：

 

 

 

71%的用户指望移动页面跟pc页面同样快，74%的用户能容忍的响应时间为5秒，因此咱们必须保证移动端页面有足够的速度。

 

移动页面的速度跟三个因素有关，分别是：移动网络带宽速度，设备性能（CPU，GPU，浏览器），页面自己。

 

目前主流的移动网络制式为3g

      

 

今年，咱们还看到了4g网络制式在快速发展，这再一次提高了移动页面的加载速度；

 

而移动设备自己，截止到目前，以iphong6三星Note4等设备为首，智能设备已经变得比以往屏幕更大，CPU、GPU、内存更靠谱。

 

 

 

而与其同时，浏览器产商也为提高页面的速度作出了不可磨灭的努力，这里你们能够看一个视频（http://www.iqiyi.com/w_19rsgfld99.html）

 

 

网络制式供应商，手机制造商，浏览器产商如此给力，咱们呢？咱们能作什么。

 

咱们能作得是对移动端页面自己优化，这也是咱们专业价值的体现，因此咱们必须作移动端页面性能优化。

 

 

该怎么作移动端页面优化呢？

 

在说这个前，要提一下pc经常使用的优化手段：

 

代码优化（css、html、js优化）

 

减小HTTP请求（雪碧图，文件合并…）

 

减小DOM节点

 

无阻塞（内联CSS，JS置后…）

 

缓存

 

...

 

这些手段大部分适用于移动端，这都是一些耳熟能详的手段，今天这里就讲了，有兴趣能够参考PDI课程《网站性能优化》。

 

今天要讲的主要是一些适用于移动端的优化手段，如今进入正题。

 

首先咱们得关注一下一个页面从开始到呈现完毕须要经历什么阶段，主要有四个阶段：

       

 

每一个阶段的主要工做如上图所示，而咱们的优化目标是：

 

 

下面咱们来针对上面的几个阶段细说一下都有哪些优化手段。

 

首先，来看看加载中有哪些优化手段：

 

1. 预加载

 

预加载方式有两种：

 

A.显性加载

 

 

相似这种用户能明显感知的，我把它称为“显性加载”，互动页面都建议加上这种加载方式，它一方面能增长页面的趣味性，另外一方面能让后续页面体验更流畅

 

B.隐性加载

 

 

 

这种在加载第一张图片的时候已经预先加载了第二张图片，从而使得页面体验更流畅的方式，我把它称为隐性加载，这种方式的好处是节省流量之余又能使得体验加强。

 

2.    按需加载

 

按需加载是不可或缺的优化手段，主要有如下两种方式：

 

 

对于这种方式，在首屏加载的时候把首屏的内容加载尽可能，而位于首屏以外的元素都只在出如今首屏时才加载，很大程度地节省了流量，提高了首次加载时间。

 

      

 

这种叫响应式加载方式，意思是利用js或者css判断分辨率，从而选择不一样尺寸的图片进行引入，这种的好处显而易见，一样能够加快加载速度和节省流量。

 

3.    压缩图片

 

对于压缩图片，首先要提的是jpg文件：

 

 

对于移动端的Jpg文件，有这样的结论：

 

a.使用大尺寸大有损压缩比的jpg

 

b.使用jpegtran进行无损压缩

 

 

 

而对于png有如下结论：

 

a.多彩图片使用png24

 

b.低彩图片使用png8

 

c.推荐使用pngquant

 

 

4.尽可能避免重定向

 

为何要尽可能避免重定向呢？由于如图：

      

 

这是一个同一网速下的测试结果，重定向之因此会比较慢，是由于它重复了域名查找，tcp连接，发送请求。

 

5. 使用其余方式代替图片

 

有两种方式，第一种是：依靠css3绘制图片

      

 

第二种：使用iconfont代替图片

 

 

      

 

但iconfont不必定比图片好，这里作了个实验：

 

      

 

对于大图片，iconfont并不比雪碧图好，建议单侧小尺寸图标才使用iconfont.

 

而后，针对脚本执行中有哪些优化手段，这里只提两点：

 

1.尽可能避免DataURI

 

DataUri在移动端并不如它在pc端吃香，由于：

 

      

 

经测试，DataURI要比简单的外链资源慢6倍，生成的代码文件相对图片文件体积没有减小反而增大，并且浏览器在对这种base64解码过程当中须要消耗内存和cpu，这个在移动端坏处特别明显。

 

2.点击事件优化

 

在移动端请适当使用touchstart，touchend，touch等事件代替延迟比较大的click事件。Click之因此慢是由于mousedown致使的：

 

 

 

而后，针对渲染阶段中有哪些优化手段，这里也只提两点：

 

1. 动画优化

 

a) 尽可能使用css3动画

 

优势：

 

不占用js主线程

 

可利用硬件加速

 

浏览器可对动画作优化

 

缺点：

 

不支持中间状态监听

 

b) 适当使用canvas动画

 

优势：

 

可规避渲染树的计算渲染更快

 

缺点：

 

开发成本高

 

维护较麻烦

 

经过对css3动画和canvas动画对比：

      

 

获得结论：5个元素之内使用css3动画，5个以上使用canvas动画。

 

c) 合理使用RAF(requestAnimationFrame)

 

优势：

 

能解决脚本问题引发的丢帧，卡顿问题

 

支持中间状态监听

 

缺点：

 

兼容问题

 

 

 

经过RAF动画与settimeout动画对比：

 

 

 

获得结论：不须要兼容android 4.3浏览器的状况下，请使用RAF制做脚本动画

 

2. 高频事件优化

 

 

相似touchmove，scroll这类的事件可致使屡次渲染，对于这种事件能够经过如下手段进行优化：

 

1.使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染

 

2.增长响应变化的时间间隔，减小重绘次数。

 

最后，针对合成/绘制只提一个优化手段：

 

GPU加速

 

触发GPU加速的方式有：

 

CSS3 transitions

 

CSS3 3D transforms

 

WebGL 3D 绘制

 

Video

...

 

使用GPU加速前有对比实验：

            

 

GPU加速其实是大幅减小了合成/绘制时间，从而大大地提升了页面速度，但GPU加速有本身的缺点：

 

过多的GPU层会带来性能开销，主要缘由是使用GPU加速实际上是利用了GPU层的缓存，让渲染资源能够重复使用，因此一旦层多了，缓存增大，就会引发别的性能问题。

 

总结

 

本文针对页面呈现的四个阶段提出了比较典型的优化手段，到最后，再提醒读者一下：其实优化是双刃剑。

按需加载提高速度，但可能致使大量重绘；

 

Touch响应快，但不少场景不适合；

GPU加速效率高，但内存开销大等等

Loading会让总体体验流畅，但容易形成用户流失

图片压缩让带宽成本下降，但可能会致使视觉效果变差

相似这样的矛盾点还有不少，请结合业务按照实际状况进行优化。

 

做者：桂花