页面渲染合成补充

在上一篇文章老生常谈之从输入URL到页面呈现的过程中描述了页面渲染流程，其中涉及页面的布局（Layout）和绘制（Painting），实际在绘制之后还有一个步骤叫做合成（Compositing）。

Compositing

在其它大佬的文章中将这一步说的非常清楚，当然还是很难懂，因为比较抽象，平常在工作中完全没有接触。这里我归纳下我的理解。

1. 在合成前的渲染过程将 DOM 树转化为渲染层

2. 合成这步将渲染层合并为合成层，有很多方法会产生新的合成层，这些方法也是常说的 css 硬件加速的方法

• 3D transforms：translate3d、translateZ 等

• video、canvas、iframe 等元素

• 通过 Element.animate() 实现的 opacity 动画转换

• 通过 СSS 动画实现的 opacity 动画转换

• position: fixed

• 具有 will-change 属性

• 对 opacity、transform、fliter、backdropfilter 应用了 animation 或者 transition

3. 合成之后会有不同的合成层，合成层将独立在 GPU 渲染

4. 在有 GPU 的时候其实渲染都是在 GPU 进行的，但是页面的布局（Layout） 和 绘制（Painting），渲染层计算这些都是在 CPU 进行计算的，会消耗 CPU。

5. GPU加速的原理是，将元素提升为单独的合成层，在处理合成层动画时，直接在 GPU 进行动画计算渲染，无需再重新走重绘（Repaint）的流程而耗费 CPU，速度也更快更流畅。

6. 合成层也并不是没有缺点，每个合成层在 GPU 单独渲染都要占用额外内容，过多的合成层会导致内存占用过高（层爆炸）

后话

以上内容是在阅读其它大佬博客后总结的，可能会有不少理解错误的地方，欢迎指正。

参考

• 浏览器层合成与页面渲染优化

• 图解浏览器的基本工作原理

• CSS动画之硬件加速

欢迎来前端菜鸟群一起摸鱼划水～516913974