移动页面性能优化(3)

时间:2014-12-29  来源:酷遨网络

然后,针对脚本执行中有哪些优化手段,这里只提两点:

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会让整体体验流畅,但容易造成用户流失

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

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

 

Copyright Right © 2009-2023 kuaonet.com Powered By 上海网站建设 酷遨网络 Inc