H5教程：移动页面性能优化

随着移动互联网的发展，咱们愈加要关注移动页面的性能优化，今天跟你们谈谈这方面的事情。

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

纵观目前移动网络的现状，移动页面布局愈来愈复杂，效果愈来愈炫，直接致使了文件愈来愈大，下载和运行速度愈来愈低，而速度低会形成不良影响，据统计：  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会让总体体验流畅，但容易形成用户流失
• 图片压缩让带宽成本下降，但可能会致使视觉效果变差
• 相似这样的矛盾点还有不少，请结合业务按照实际状况进行优化。

 

转自：TGideas