2022-06-27

什么是层

从上图（结合浏览器的基本渲染过程图）我们可以知道层的产生过程，渲染树最终会转换成层树（Layer tree），从上图我们也可以知道其实chrome（webkit）有两种类型的层。

RenderLayers 渲染层，这是负责对应 DOM 子树

GraphicsLayers 图形层，这是负责对应 RenderLayers子树。

在 DOM 树中每个节点都会对应一个 LayoutObject，当他们的 LayoutObject 处于相同的坐标空间时，就会形成一个 RenderLayers ，也就是渲染层。RenderLayers 来保证页面元素以正确的顺序合成，这时候就会出现层合成（composite），从而正确处理透明元素和重叠元素的显示。

某些特殊的渲染层会被认为是合成层（Compositing Layers），合成层拥有单独的 GraphicsLayer，而其他不是合成层的渲染层，则和其第一个拥有 GraphicsLayer 父层公用一个。

而每个GraphicsLayer（合成层单独拥有的图层） 都有一个 GraphicsContext，GraphicsContext 会负责输出该层的位图，位图是存储在共享内存中，作为纹理上传到 GPU 中，最后由 GPU 将多个位图进行合成，然后显示到屏幕上，到这里终于道出了浏览器页面渲染呈现GPU的存在，再结合我们上文提到的GPU对于密集型数据（比如图像像素级）的运算能力，我们也差不多说明了GPU加速为何可以在前端中进行应用 --让需要进行复杂动画的元素（或所在元素）单独拥有一个合成图层。

形成过程

Painting（绘制）的具体工作是由浏览器UI后端部分负责完成的

在Painting阶段，会调用引擎的paint api（canvas会调用draw api）进行像素级信息计算与绘制，像素级信息具体表现为帧信息（图层）

浏览器会将各层的信息发送给GPU

GPU会将各层合成（composite），显示在屏幕上

合成层的优点

1.合成层的位图，会交由 GPU 合成，比 CPU 处理要快

2.当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层

3.对于 transform 和 opacity 效果，不会触发 layout 和 paint

合成层缺点

合成层占用内存的问题。很多不需要提升为合成层的元素因为某些不当操作成为了合成层

使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰合成的排序，可以有效减少创建不必要的合成层，提升渲染性能，移动端优化效果尤为明显。

如何开启GPU加速

transform（当 3D 变换的样式出现时会使用 GPU 加速）

opacity

filter

will-change