css3动画与js动画谁更优？

[Twlig]

渲染引擎可以在主线程和合成线程中执行。而js引擎只能在主线程中执行。因此，渲染引擎和js引擎在主线程的使用权方面存在互斥关系。

渲染引擎

主线程：HTML解析器，CSS解析器，计算布局layout，以及绘制。

合成线程：相当于独立的完成部分的渲染工作，比如合成图层。因此，可以看出合成线程是不会触发回流和重绘的。当然也只有部分属性能在合成线程中。比如transform和opacity。

css动画对比js动画

• CSS 动画大多数都是补间动画，而 JS 动画是逐帧动画。
• 帧速不好的浏览器，CSS3 可以自然降级兼容。代码简单，调优方向固定。
• JS 动画是逐帧动画，更细腻的动画，可控性高，炫酷高级的动画。

css3动画优于js动画的条件

• 是否导致layout
• repaint的面积
• 是否是有高消耗的属性（css shadow等）
• 是否启用硬件加速

CSS启用gpu硬件加速

浏览器在处理下面的 css 的时候，会使用 gpu 渲染：

• transform
• opacity
• filter
• will-change

浏览器是把内容分到不同的图层分别渲染的，最后合并到一起，而触发 gpu 渲染会新建一个图层，把该元素样式的计算交给 gpu。

这里要注意的是 gpu 硬件加速是需要新建图层的，而把该元素移动到新图层是个耗时操作，界面可能会闪一下，所以最好提前做。will-change 就是提前告诉浏览器在一开始就把元素放到新的图层，方便后面用 gpu 渲染的时候，不需要做图层的新建。

启用gpu加速

当然，有的时候我们想强制触发硬件渲染，就可以通过上面的属性，比如

will-change: transform; 

或者

transform:translate3d(0, 0, 0);

参考文章：

• https://www.zhihu.com/question/33686030?sort=created
• https://zhuanlan.zhihu.com/p/501608119
• https://zhuanlan.zhihu.com/p/404656386?utm_medium=social&utm_oi=27091277971456
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change