随着移动互联网的发展，我们越发要关注移动页面的效能优化，今天跟大家谈谈这方面的事情。先，为什么要移动页面进行优化？
纵观目前行动网络的现状：
移动页面布局越来越复杂，效果越来越炫，直接导致了档案越来越大，下载和执行速度越来越低，而速度低会造成不良影响，据统计：
71% 的多用户期望移动页面跟 PC 页面一样快，74% 的多用户能容忍的响应时间为 5 秒，所以我们必须保证移动端页面有足够的速度。
移动页面的速度跟三个因素有关，分别是：行动网络频宽速度，装置效能（CPU，GPU，浏览器），页面本身。
目前主流的行动网络制式为 3G：
今年，我们还看到了 4g 网络制式在快速发展，这再一次提升了移动页面的载入速度；
而移动装置本身，截止到目前，以 iPhon6/三星 Note4 等装置为，智慧装置已经变得比以往萤幕更大，CPU 、 GPU 、记忆体更靠谱。
而与其同时，浏览器产商也为提升页面的速度做出了不可磨灭的努力。
网络制式供应商，手机制造商，浏览器产商如此给力，我们呢？我们能做什么。
我们能做得是对移动端页面本身优化，这也是我们价值的体现，所以我们必须做移动端页面效能优化。
该怎么做移动端页面优化呢？
在说这个前，要提一下 PC 常用的优化手段：
代码优化（css 、 html 、 js 优化）
减少 HTTP 请求（雪碧图，档案合并…）
减少 DOM 节点
无阻塞（内联 CSS，JS 置后…）
快取
…
这些手段大部分适用于移动端，这都是一些耳熟能详的手段，今天这里就讲了，有兴趣可以参考 PDI 课程《网站效能优化》。
今天要讲的主要是一些适用于移动端的优化手段，现在进入正题。
先我们得关注一下一个页面从开始到呈现完毕需要经历什么阶段，主要有四个阶段：
每个阶段的主要工作如上图所示，而我们的优化目标是：
下面我们来针对上面的几个阶段细说一下都有哪些优化手段。
先，来看看载入中有哪些优化手段：
1. 预载入
预载入方式有两种：
A. 显性载入
类似这种多用户能明显感知的，我把它称为显性载入，互动页面都建议加上这种载入方式，它一方面能增加页面的趣味性，另一方面能让后续页面体验更流畅。
B. 隐性载入
这种在载入张图片的时候已经预先载入了第二张图片，从而使得页面体验更流畅的方式，我把它称为隐性载入，这种方式的好处是节省流量之余又能使得体验增强。
2. 按需载入
按需载入是不可或缺的优化手段，主要有以下两种方式：
对于这种方式，在屏载入的时候把屏的内容载入尽量，而位于屏之外的元素都只在出现在屏时才载入，很大程度地节省了流量，提升了次载入时间。
这种叫响应式载入方式，意思是利用 JS 或者 CSS 判断解析度，从而选择不同尺寸的图片进行引入，这种的好处显而易见，同样可以加快载入速度和节省流量。
3. 压缩图片
对于压缩图片，先要提的是 jpg 档案：
对于移动端的 JPG 档案，有这样的结论：
使用大尺寸大有失真压缩比的 jpg
使用 jpegtran 进行无失真压缩
而对于 png 有以下结论：
多彩图片使用 png24
低彩图片使用 png8
推荐使用 pngquant
尽量避免重定向
为什么要尽量避免重定向呢？因为如图：
这是一个同一网速下的测试结果，重定向之所以会比较慢，是因为它重复了域名查询，tcp 连结，传送请求。
5. 使用其他方式代替图片
有两种方式，种是：依靠 CSS 3 绘制图片：
第二种：使用 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 动画
优点：
可规避渲染树的计算渲染更快
缺点：
开发成本高，维护较麻烦。
通过对 CSS 3 动画和 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 会让整体体验流畅，但容易造成多用户流失
图片压缩让频宽成本降低，但可能会导致视觉效果变差
类似这样的矛盾点还有很多，请结合业务按照实际情况进行优化。