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

（2）、点击事件优化

在移动端请适当使用touchstart，touchend，touch等事件代替延迟比较大的click事件，Click之所以慢是因为mousedown导致的，如下图所示：

三、渲染阶段中有哪些优化手段

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

1、动画优化

对于动画的优化，简单来说，有以下3种：

（1）、尽量使用css3动画

优点：不占用js主线程；可利用硬件加速；浏览器可对动画做优化。

缺点：不支持中间状态监听。

（2）、适当使用canvas动画

优点：可规避渲染树的计算渲染更快

缺点：开发成本高；维护较麻烦；

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

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

（3）、合理使用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会让整体体验流畅，但容易造成用户流失；图片压缩让带宽成本降低，但可能会导致视觉效果变差；类似这样的矛盾点还有很多，请结合业务按照实际情况进行优化。

本文为马海祥博客原创文章，如想转载，请注明原文网址摘自于，注明出处；否则，禁止转载；谢谢配合！