腾讯干货！从四个方面帮你做好移动页面性能优化

2. 点击事件优化

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

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

1. 动画优化

a）尽量使用css3动画

优点：

1. 不占用js主线程
2. 可利用硬件加速
3. 浏览器可对动画做优化

缺点：

不支持中间状态监听

b）适当使用canvas动画

优点：

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

缺点：

开发成本高，维护较麻烦。

通过对CSS 3动画和Canvas 动画对比：

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

c）合理使用RAF（requestAnimationFrame）

优点：

1. 能解决脚本问题引起的丢帧，卡顿问题
2. 支持中间状态监听

缺点：

兼容问题

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

得到结论：不需要兼容android 4.3浏览器的情况下，请使用RAF制作脚本动画

2. 高频事件优化

类似touchmove，scroll这类的事件可导致多次渲染，对于这种事件可以通过以下手段进行优化：

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

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

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

GPU加速

触发GPU加速的方式有：

1. CSS3 transitions
2. CSS3 3D transforms
3. WebGL 3D 绘制
4. Video
5. ……

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

GPU加速实际上是大幅减少了合成/绘制时间，从而大大地提高了页面速度，但GPU加速有自己的缺点：

过多的GPU层会带来性能开销，主要原因是使用GPU加速其实是利用了GPU层的缓存，让渲染资源可以重复使用，所以一旦层多了，缓存增大，就会引起别的性能问题。

总结

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

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

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

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

Loading会让整体体验流畅，但容易造成用户流失

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

类似这样的矛盾点还有很多，请结合业务按照实际情况进行优化。

注：相关网站建设技巧阅读请移步到建站教程频道。

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!