移动端web性能——动画

来源：互联网发布：网络教育金融牌照编辑：程序博客网时间：2024/05/16 08:02

移动端web开发，性能一直是值得关注的问题，今天我就和大家分享一下，我在开发过程中遇到的一个性能问题，以及我的优化过程。

背景：

还是我那个人流量卡片，上周修复了低端安卓机（安卓4.0不触发touchend）不能滑动的问题，但是新的问题又出现了，上周五QA手拿了几个古董机找到了我，说滑动有卡顿。

问题定位：

高端机没有问题，只有低端机有卡顿现象，我认为有两种可能

1.兼容性问题：有可能就像上次不触发touchend事件一样，于是我上网查找相关问题，没有有查到兼容性问题，查到的都是性能问题。

2.性能问题：我最开始是使用translateX做的动画，高端机没有问题，低端机（安卓4.0 ios8.0）有卡顿现象，于是借鉴了m.taobao.com首页的轮播图的动画效果，通过卡发着工具发现他们用的是translate3d()；于是我也把我的代码也改成translate3d()卡顿现象解决。

问题的深入：

1.影响性能的原因？

问为什么做动画影响性能，那就要从做动画时浏览器都干了什么说起，做动画时浏览器的渲染过程大致以下几个过程

JavaScript：一般来说，我们会使用JavaScript来实现一些视觉变化的效果。比如CSS Animation、Transition和Web Animation API。

Style：计算样式。这个过程是根据CSS选择器，对每个DOM元素匹配对应的CSS样式。这一步结束之后，就确定了每个DOM元素上应该应用什么CSS样式规则。

Layout：布局。上一步确定了每个DOM元素的样式规则，这一步就是具体计算每个DOM元素最终在屏幕上显示的大小和位置。Web页面中元素的布局是相对的，因此一个元素的布局发生变化，会联动地引发其他元素的布局发生变化。比如，<body>元素的width变化会影响其后代元素的宽度。因此，对于浏览器而言，布局过程是经常发生的。

Paint：绘制。本质上就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等，也就是一个DOM元素所有的可视效果。一般来说，这个绘制过程是在多个层上完成的。

Composite：渲染层合并。前面也说过，对于页面中DOM元素的绘制是在多个层上进行的。在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后在屏幕上呈现。对于有位置重叠的元素的页面，这个过程尤其重要，因为一量图层的合并顺序出错，将会导致元素显示异常。其中Layout和Paint是非常浪费性能的，这里我就不多说了，所以我们应该尽量避免在全局Layout和Paint。修改什么css属性会触发Layout和Paint我们可以在CSS Triggers网站上看到。

2.为什translate3d()性能高于translateX()?

原因一：translate3d会调用硬件加速，所说的硬件就是GPU,GPU处里图像的能力远远高于CPU。

原因二：设置translate3d属性的元素会单独形成一个图层，而独立的图层的Layout和Paint只会影响该图层，不会影响其他图层，这样性能就会提升。

3.几种实现动画方案对比

不是所有属性动画消耗的性能都一样，其中消耗最低的是transform和opacity两个属性（当然还有会触发Composite的其他CSS属性），其次是Paint相关属性。所以在制作动画时，建议使用transform的translate替代margin或position中的top、right、bottom和left，同时使用transform中的scaleX或者scaleY来替代width和height。

参考：

http://www.w3cplus.com/animation/animation-performance.html

大漠是这篇文章的作者，真心感谢愿意分享自己知识的大神

阅读全文

0 0