摘要： 在了解了回流与重绘之后，我们深入到浏览器的渲染机制，探索如何利用
transform和opacity属性来创建合成层，实现最极致的动画性能。
核心内容
-
浏览器渲染管线（Rendering Pipeline）
- 回顾：回流（Layout/Paint） -> 重绘（Paint） -> 合成（Composite）。
- 目标：尽可能跳过回流和重绘，直接进入合成阶段。
-
什么是合成（Compositing）？
- 浏览器将页面的不同部分分层（Layers），分别栅格化，并在合成线程（Compositor Thread）中组合成页面的过程。
- 优势：合成是在独立的线程中进行的，不占用主线程，因此效率极高，即使主线程繁忙，动画也能保持流畅。
-
如何触发合成层？
- 最常用且高效的方式是使用CSS的
transform和opacity属性。 - 原因：它们的变动不影响文档流、几何形状或颜色（不影响布局和绘制），通常只需GPU进行合成。
- 最常用且高效的方式是使用CSS的
-
优化技巧：
- 动画性能：将动画元素应用
transform: translateZ(0)或will-change: transform来提升至新的合成层。 - 谨慎使用：过多的合成层会消耗大量内存和管理开销。只在性能关键的地方使用。
- 最佳实践：
- 使用
transform: translate(x, y)代替修改left,top。 - 使用
transform: scale(x)代替修改width,height。 - 使用
opacity代替修改visibility或直接改变颜色来实现显隐。
- 使用
- 动画性能：将动画元素应用
-
会导致回流的属性 vs. 仅导致合成的属性
- 回流：
width,height,margin,padding,left,top... - 重绘：
color,background-color,visibility... - 合成：
transform,opacity
- 回流：
