为什么CSS动画比JavaScript高效？

显示器显示图像的原理？

每个显示器都有固定的刷新频率，通常是60HZ，也就是每秒更新60张图片，更新的图片都来自于显卡中一个叫前缓冲区的地方，显示器所做的任务很简单，就是每秒固定读取60次前缓冲区中的图像，并将读取的图像显示到显示器上。

显卡的作用是什么？

显卡的职责就是合成新的图像，并将图像保存到后缓冲区中，一旦显卡把合成的图像写到后缓冲区，系统就会让后缓冲区和前缓冲区互换，这样就能保证显示器能读取到最新显卡合成的图像。通常情况下，显卡的更新频率和显示器的刷新频率是一致的。但有时候，在一些复杂的场景中，显卡处理一张图片的速度会变慢，这样就会造成视觉上的卡顿

帧和帧率的概念？

大多数设备屏幕的更新频率是60次/秒，这也就意味着正常情况下要实现流畅的动画效果，渲染引擎需要每秒更新60张图片到显卡的后缓冲区。

我们把渲染流水线生成的每一幅图片称为一帧，把渲染流水线每秒更新了多少帧称为帧率，比如滚动过程中1秒更新了60帧，那么帧率就是60Hz（或者60FPS）

渲染引擎是如何实现一帧图像的？

实现一帧图像的方式有重排、重绘和合成三种方式

这三种方式的渲染路径是不同的，通常渲染路径越长，生成图像花费的时间就越多。

• 重排：它需要重新根据 CSSOM 和 DOM 来计算布局树，这样生成一幅图片时，会让整个渲染流水线的每个阶段都执行一遍，如果布局复杂的话，就很难保证渲染的效率了。
• 重绘：因为没有了重新布局的阶段，操作效率稍微高点，但是依然需要重新计算绘制信息，并触发绘制操作之后的一系列操作。
• 合成：相较于重排和重绘，合成操作的路径就显得非常短了，并不需要触发布局和绘制两个阶段，如果采用了 GPU，那么合成的效率会非常高。

PS: 按照效率，推荐合成方式优先

浏览器是如何实现合成的？

Chrome中的合成技术，可以用三个词来概括总结：分层、分块和合成。

需要重点关注的是，合成操作时在合成线程上完成的，这也就意味着在执行合成操作时，是不会影响到主线程执行的。这就是为什么经常主线程卡住了，但是CSS动画依然能执行的原因。

CSS动画比JavaScript动画高效的原因是什么？

当对某个元素做几何形状变换、透明度变换或者一些缩放操作时，如果使用JavaScript来写这些效果 ，会牵涉到整个渲染流水线，所以JavaScript的绘制效率会非常低下。可以使用 will-change 来告诉渲染引擎你会对该元素做一些特效变换，好处见下。

如何使用will-change来优化动画或特效？

.box {
    will-change: transform, opacity;
}

这段代码就是提前告诉渲染引擎 box 元素将要做几何变换和透明度变换操作，这时候渲染引擎会将该元素单独实现一帧，等这些变换发生时，渲染引擎会通过合成线程直接去处理变换，这些变换并没有涉及到主线程，这样就大大提升了渲染的效率。这也是 CSS 动画比JavaScript 动画高效的原因。

劣势：通过will-change来提前告诉渲染引擎，让它为该元素准备独立的层带来的坏处是：它占用的内存也会大大增加，因为从层树开始，后续每个阶段都会多一个层结构，这些都需要额外的内存，因此需要恰当地使用will-change.