层叠上下文
Stacking Context，我们假定用户正面向视窗或网页，而HTML元素沿着其相对于用户的一条虚构的z轴排开，层叠上下文就是对这些HTML元素的一个三位构想。HTML元素基于其属性按照优先级顺序占据这个空间。简而言之，让HTML元素在2D平面堆叠出3D的视觉效果。
形成层叠上下文
- 文档根元素是根层叠上下文
- position属性不为static且z-index不为auto
- opacity属性值小于1
- flex/grid布局切z-index不为auto
- 如果您声明的属性的任何非默认值会在元素上创建堆叠上下文，则在will-change中指定该属性一定会在元素上创建堆叠上下文。
- tranform值不为none
- filter值不为none
层叠上下文特点
- 层叠上下文可以包含在其他层叠上下文中，有层级关系
- 每个层叠上下文完全独立于他的兄弟元素
- 每个层叠上下文是自包含的，层叠关系发生改变，该元素将作为整体在父级层叠上下文按顺序层叠
- 没有创建自己的层叠上下文的元素会被父层叠上下文同化
- 层叠等级的比较只有在当前层叠上下文中才有意义。不同层叠上下文比较层叠等级是没有意义的。
Layer
- 渲染图层，是页面普通的文档流，我们虽然可以通过绝对定位、相对定位、浮动定位脱离文档流，但它们仍属于根层叠上下文，只有一个绘图上下文对象GraphicsContext
- 复合图层，单独分配系统资源，每个复合图层都有一个独立的GraphicsLayer。每个GraphicsLayer都有一个GraphicsContext
形成复合图层
- 3D转换：translate3d translateZ
- <video> <canvas> <iframe>
- transform和opacity经由Element.animate()
- transform和opacity经由CSS过渡和动画
- 有复合图层后代且本身fixed定位
- will-change
- 拥有加速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 前提下的
网友评论