CSS3动画性能优化集

CSS FrontEnd 200 02/29/2020

主线程和排版线程

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

在浏览器开始渲染页面,或者长时间执行某个 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 */
  }
  


参考链接

css-animations-and-transitions-performance
Jovey - 实用的 CSS — 动画性能对比
css3性能优化-针对移动端卡顿问题