简介
分层的定义
分层是浏览器渲染引擎中用于提高渲染性能的一种技术。在浏览器将网页内容呈现给用户的过程中，分层技术将页面的不同部分划分成多个独立的“图层”。每个层可以包含页面的一部分元素，并且可以独立于其他层进行渲染和合成。
分层的作用
分层目标是提升页面的整体渲染性能，浏览器渲染一帧需要经过 html 解析、样式计算、布局、更新 layer tree等过程，详细过程可以看看这边文章： 从URL到页面展示：浏览器背后的进程协作之旅。
对于分层的作用可以总结为两点：局部更新、独立合成。
局部更新
分层技术允许浏览器仅对页面中变化的部分进行更新，而不是整个页面。这意味着只有包含变化元素的层会被重新渲染。这种局部更新减少了不必要的计算和资源消耗，也避免了整个文档的重排和重绘，提升页面的渲染性能。
独立合成
通过在独立的合成线程上进行图层的合成工作，分层技术实现了渲染过程与主线程的解耦。这样，即使主线程忙于执行JavaScript代码，页面的渲染和动画也能继续流畅运行，避免了页面渲染的卡顿现象。合成线程可以利用多核处理器的优势和GPU加速，高效地合并各个图层，提升渲染速度和性能。
如何让元素分层
- 对于
<video>和<canvas>元素来说浏览器通常会自动将其转为独立的层，因为它们的内容通常需要频繁更新； - 通过设置CSS属性也能触发分层，例如
transform: translate3d(0,0,0)、position:fixed、will-change: transform；
上图中，我在
<h1>标签中增加了 transform: translate3d(0,0,0)属性，浏览器自动对齐分层，右侧复合图层可以看到增加了h1.article-title的图层。
查看页面分层
浏览器提供了 “3D视图” 可以查看当前页面的分层情况，复合图层中展示了当前页面所有图层，右侧通过 3D 形式展示了图层的组成情况。复合图层下方还能查看当前元素分层的原因。
总结
分层技术是浏览器中用于优化页面渲染性能的一种机制，它通过创建多个独立图层来实现局部更新和硬件加速合成，从而减少不必要的计算和资源消耗，提升页面响应速度和动画流畅度。
然而，虽然分层能显著提高性能，但也需要适度使用，因为每增加一个层就会占用更多的内存资源。过度分层可能导致内存占用过大，影响整体性能，因此开发者需要在提升渲染效率和控制资源使用之间找到平衡点。
