随着移动互联网的发展，我们必须越来越重视手机页面的性能优化。今天我就和大家聊聊这方面的内容。首先，为什么大多数移动端页面要优化？纵观移动网络现状：移动端页面布局越来越复杂，效果越来越眼花缭乱，直接导致文件越来越大，下载和运行速度越来越低，以及低速会造成不良影响。据统计：71%的用户希望手机页面能和PC页面一样快，74%的用户可以忍受5秒的响应时间，所以一定要保证手机页面有足够的速度。移动页面的速度与三个因素有关，即：移动网络带宽速度、设备性能（CPU、GPU、浏览器）和页面本身。目前主流的手机网络制式是3G：今年我们也看到了4G网络制式的快速发展，再次提升了手机页面的加载速度；和移动设备本身，到目前为止，由iPhone6/SamsungNote4和其他设备主导，智能设备变得比以往任何时候都更大，屏幕更大，CPU、GPU和内存更可靠。同时，浏览器厂商也为提高页面速度做出了不可磨灭的努力。网络标准供应商、手机厂商、浏览器厂商这么厉害，那我们呢？我们可以做什么。我们能做的就是优化手机页面本身，这也是我们专业价值的体现，所以一定要优化手机页面的性能。移动端页面优化怎么做？讲这个之前，先提一下PC常用的优化方法：代码优化（css、html、js优化）减少HTTP请求（Sprite图片、文件合并……）减少非阻塞DOM节点（内联CSS、JS后placement…)Caching...这些方法大多适用于移动端。这些是一些熟悉的方法。我今天将在这里谈论它们。有兴趣的可以参考PDI课程《网站性能优化》。今天要说的主要是一些适合移动端的优化方法，下面进入正题。首先，我们要注意一个页面从开始到呈现完成需要经历哪些阶段。主要有四个阶段：每个阶段的主要工作如上图所示，我们的优化目标是：我们围绕以上几个阶段来详细说说优化方法。首先我们来看看loading中的优化方式：1.Preloading预加载有两种方式：A.Explicitloading类似于这种用户明显的感知。我称之为显式加载，推荐用于交互式页面。再加上这种加载方式，一方面可以增加页面的趣味性，另一方面可以让后续的页面体验更加流畅。B.隐式加载该方法在加载第一张图片时预加载第二张图片，让页面体验更流畅。我称之为隐式加载。这种方式的好处除了可以节省流量外，还可以提升体验。2.按需加载按需加载是必不可少的优化手段。主要有两种方法：对于这种方法，在加载首屏时，尽可能加载首屏的内容，而位于首屏之外的元素只有出现在首屏时才加载，这大大节省了流量并提高了最终加载时间。这个叫做响应式加载，就是用JS或者CSS判断分辨率，从而选择不同尺寸的图片导入。这样做的好处是显而易见的，还可以加快加载速度，节省流量。3、压缩图片对于压缩图片，首先要提到的就是jpg文件：对于移动端的JPG文件，有这样的结论：使用jpg，尺寸大，有损压缩比高，使用jpegtran进行无损压缩，如下png的结论：彩色图像使用png24低色图像使用png8推荐使用pngquant尽量避免重定向为什么要尽量避免重定向？因为如图：这是相同网速下的测试结果。重定向之所以慢，是因为它重复查找域名、tcp链接、发送请求。5.有两种方法可以使用其他方法替换图片。第一个是：依靠CSS3绘制图片；第二种是用iconfont代替图片，但是iconfont不一定比图片好。这是一个实验：对于大图片，Iconfont并不比sprite图片好。一侧的小图标推荐使用iconfont。那么，对于脚本执行中的优化方法，这里只说两点：1、尽量避免DataURI。DataUri在移动端不如在PC端流行。因为：经过测试，DataURI比简单的外部链接资源慢了6倍，而且生成的代码文件的大小相比图片文件没有减少，反而增加了，而且浏览器在解码的过程中需要消耗内存和CPU这个base64。移动端的劣势尤为明显。2、点击事件优化在移动端，请使用touchstart、touchend、touch等事件来代替延时比较长的Click事件。Click慢的原因是mousedown引起的：那么对于渲染阶段的优化方法，这里只说两点：1.动画优化a)尽量使用css3动画。controller可以优化动画缺点：不支持中间状态监听b)适当使用canvas动画优点：可以避免渲染树的计算和渲染缺点：开发成本高，维护麻烦。通过CSS3动画和Canvas动画的对比：5个元素以内使用CSS3动画，5个元素以上使用canvas动画。c)合理使用RAF(requestAnimationFrame)优点：可以解决脚本问题导致的丢帧，支持中间状态监听缺点：兼容性问题比较RAF动画和settimeout动画：结论：不需要兼容android4.3浏览器下，请使用RAF制作脚本动画2.高频事件优化touchmove、scroll等事件会导致多次渲染。对于这种事件，可以采用以下方法进行优化：1.使用requestAnimationFrame监听帧变化，以便在正确的时候2.增加响应变化的时间间隔，减少重绘次数。***，合成/绘图只有一种优化方式：GPU加速触发GPU加速的方式有：CSS3transitionsCSS33DtransformsWebGL3DrenderingVideo...在使用GPU加速之前有个对比实验：GPU加速实际上大大减少了合成/绘图时间，从而大大提高了页面速度，但是GPU加速也有其自身的缺点：过多的GPU层会带来性能开销，主要原因是使用GPU加速实际上是使用了GPU层的缓存，这样渲染资源就可以被重复使用，所以一旦层数多了，缓存增加了，就会造成其他的性能问题。综上所述，本文针对页面呈现的四个阶段提出了典型的优化方法。最后提醒各位读者：其实优化是一把双刃剑。按需加载提高了速度，但可能会导致大量重绘；触摸响应速度快，但不适用于很多场景；GPU加速效率高，但内存开销高等。加载会使整体体验流畅，但容易造成用户流失。图像压缩降低了带宽成本，但可能导致视觉效果不佳。这样的矛盾有很多。请结合业务，根据实际情况进行优化。
