图层

层叠上下文

Stacking Context，我们假定用户正面向视窗或网页，而HTML元素沿着其相对于用户的一条虚构的z轴排开，层叠上下文就是对这些HTML元素的一个三位构想。HTML元素基于其属性按照优先级顺序占据这个空间。简而言之，让HTML元素在2D平面堆叠出3D的视觉效果。

形成层叠上下文

1. 文档根元素是根层叠上下文
2. position属性不为static且z-index不为auto
3. opacity属性值小于1
4. flex/grid布局切z-index不为auto
5. 如果您声明的属性的任何非默认值会在元素上创建堆叠上下文，则在will-change中指定该属性一定会在元素上创建堆叠上下文。
6. tranform值不为none
7. filter值不为none

层叠上下文特点

1. 层叠上下文可以包含在其他层叠上下文中，有层级关系
2. 每个层叠上下文完全独立于他的兄弟元素
3. 每个层叠上下文是自包含的，层叠关系发生改变，该元素将作为整体在父级层叠上下文按顺序层叠
4. 没有创建自己的层叠上下文的元素会被父层叠上下文同化
5. 层叠等级的比较只有在当前层叠上下文中才有意义。不同层叠上下文比较层叠等级是没有意义的。

Layer

1. 渲染图层，是页面普通的文档流，我们虽然可以通过绝对定位、相对定位、浮动定位脱离文档流，但它们仍属于根层叠上下文，只有一个绘图上下文对象GraphicsContext
2. 复合图层，单独分配系统资源，每个复合图层都有一个独立的GraphicsLayer。每个GraphicsLayer都有一个GraphicsContext

形成复合图层

1. 3D转换：translate3d translateZ
2. <video> <canvas> <iframe>
3. transform和opacity经由Element.animate()
4. transform和opacity经由CSS过渡和动画
5. 有复合图层后代且本身fixed定位
6. will-change
7. 拥有加速CSS过滤器的filter

常见问题

为什么transform动画没有触发repaint ？

transform动画由GPU控制，支持硬件加载

Composite

Nodes到LayoutObjects

DOM树中的每个Node节点都有一个Layout Object，Layout Object知道如何在屏幕上绘制node

LayoutObjects到PaintLayers

一般来说，拥有相同坐标空间的LayoutObjects，属于同一个渲染层（Paint Layer）PaintLayer 最初是用来实现 stacking contest（层叠上下文），以此来保证页面元素以正确的顺序合成（composite），这样才能正确的展示元素的重叠以及半透明元素等等。因此满足形成层叠上下文条件的 LayoutObject 一定会为其创建新的渲染层，当然还有其他的一些特殊情况，为一些特殊的 LayoutObjects 创建一个新的渲染层，比如 overflow != visible 的元素。根据创建 PaintLayer 的原因不同，可以将其分为常见的 3 类：

• NormalPaintLayer
  • 根元素html
  • position 为 relative fixed sticky absolute
  • opacity小于1
  • 有css filter
  • 有css mask
  • 有 CSS mix-blend-mode 属性（不为 normal）
  • 有 CSS transform 属性（不为 none）
  • backface-visibility 属性为 hidden
  • 有 CSS reflection 属性
  • 有 CSS column-count 属性（不为 auto）或者 有 CSS column-width 属性（不为 auto）
  • 当前有对于 opacity、transform、fliter、backdrop-filter 应用动画
• OverflowClipPaintLayer
  • overflow不为visible
• NoPaintLayer
  • 不需要 paint 的 PaintLayer，比如一个没有视觉属性（背景、颜色、阴影等）的空 div。

满足以上条件的 LayoutObject 会拥有独立的渲染层，而其他的 LayoutObject 则和其第一个拥有渲染层的父元素共用一个。

PaintLayers到GraphicsLayers

某些特殊的渲染层会被认为是合成层（Compositing Layers），合成层拥有单独的 GraphicsLayer，而其他不是合成层的渲染层，则和其第一个拥有 GraphicsLayer 父层公用一个。
每个 GraphicsLayer 都有一个 GraphicsContext，GraphicsContext 会负责输出该层的位图，位图是存储在共享内存中，作为纹理上传到 GPU 中，最后由 GPU 将多个位图进行合成，然后 draw 到屏幕上，此时，我们的页面也就展现到了屏幕上。
渲染层提升为合成层有一个先决条件，该渲染层必须是 SelfPaintingLayer（基本可认为是上文介绍的 NormalPaintLayer）。以下所讨论的渲染层提升为合成层的情况都是在该渲染层为 SelfPaintingLayer 前提下的