CSS3动画性能优化集

文章摘要moonshot-v1-8k

Standby API Responsing..

主线程和排版线程

现代浏览器中，渲染页面所要负责的线程主要有两个：主线程和排版线程。

在浏览器开始渲染页面，或者长时间执行某个 JS 时，主线程会一直在忙碌状态，此时对于用户的任何输入或是操作都不会有所响应。

主线程

• 运行 JS
• 计算 HTML 元素 CSS 样式
• 页面布局
• 绘制页面元素成一个或多个位图
• 把这些位图移交给排版线程

排版线程

• 通过 GPU 渲染位图，并显示在屏幕上
• 计算 HTML 元素 CSS 样式
• 向主线程请求更新位图的可见部分或即将可见的部分
• 判断出当前页面处于可见的部分
• 判断出即将通过页面滚动而可见的部分
• 随着用户滚动页面来移动这些部分

排版线程对于用户的操作保持快速的响应，普遍的效率时每秒 60 帧的速度去刷新显示。

Transtion

图中橘黄色部分代表操作相对较慢，消耗较大；蓝色部分代表操作相对较快，消耗较小

Transform

总结

当页面需要位移动画时，我们有两种方案：使用 position 或是 transalte，而这两种是符合上述情况的。其中 position 的位移方案与第一个符合，在动画执行过程中会使浏览器重新渲染；另一外 transalte 则与第二个符合，在执行动画时不会发生重新渲染。因此，在需要写动画时，我们需要选择合适的方案，最好是选择 scale()、rotate()、transalte() 等，因为他们具有更好的性能。

使用css，jquery，canvas制作动画

Canvas

• 优点：性能好，强大，支持多数浏览器（除了IE6、IE7、IE8），画出来的图形可以直接保存为 .png 或者 .jpg的图形；
• 缺点：依赖于HTML，只能通过脚本绘制图形，没有实现动画的API（依靠事件和定时器更新）；由于在 canvas 上以编程方式显示的文本其实就是位图，因此搜索爬行器将完全忽略文本。文本内容也无法被屏幕阅读器识别。

CSS3

• 优点：简单且与内容分离、css动画不触发layout和paint；（这些属性的修改不会触发layout和paint：backface-visibility、opacity、perspective、perspective-origin、transform）；
• 缺点：有浏览器兼容性问题、安卓手机会出现卡顿、受排版引擎的限制，与整个页面的dom结构息息相关。

JQuery

• 优点：没有兼容性问题
• 缺点：每一帧，都要进行repaint、recomposite（非常耗时）；

总结

在移动端动画效果上，使用css3动画要比jquery动画效率高的多。在安卓手机上表现尤其明显！所以移动端动画以css3动画为优先，jquery只能用来简单处理应用逻辑。css3动画是用来给内容布局加上特效的通用解决方案，但是在性能堪忧的移动浏览器上很可能会受排版性能所限，达不到理想的效果。而对性能有要求的特定场景，比如游戏，用canvas会有很大的提高。

css3在移动端出现卡顿问题

css3动画在ios上跑没问题，但是在安卓上有时会出现卡顿现象，包括下面几点原因。

1. 是否导致layout？ 尽可能将动画元素absolute或者fixed化以避免影响文档树，以减少重排.
2. 是否启用硬件加速？ “用到了CSS3动画”和“开启了硬件加速”是两件事情，虽然前者有可能导致后者。开启硬件加速在webkit中有神奇的万金油：opacity: 1;或者-webkit-backface-visibility: hidden;。
3. 是否是有高消耗的属性？（css shadow、gradients、background-attachment: fixed等） 有的话，图片也是一种选择。这算得上是用空间换时间的优化了。
4. repaint（浏览器重绘）的面积 缩小动画面积，这一步的优化有限;
5. 使用 transform 生成动画，避免使用 height,width,margin,padding 等

使用 transform，浏览器只需要一次生成这个元素的位图，并在动画开始的时候将它提交给 GPU 去处理 。之后，浏览器不需要再做任何布局、 绘制以及提交位图的操作。从而，浏览器可以充分利用 GPU 的特长去快速地将位图绘制在不同的位置、执行旋转或缩放处理。简而言之，transform 动画由GPU控制，支持硬件加速，并不需要软件方面的渲染

动画过程有闪烁

参考以下方案：

.cube {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    /* Other transform properties here */
  }

.cube {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    /* Other transform properties here */
  }