浏览器渲染（层叠上下文）

整体流程

1、解析HTML，构建DOM树 --> DOM
2、解析CSS，生成CSS规则树 --> CSSOM
3、合并DOM树和CSS规则，生成Render树（页面布局） --> layout
4、绘制Render树（paint），绘制页面像素信息 --> paint
5、显示

DOM -> CSSOM -> layout(renderObject) --> paint(PaintLayer渲染层(stacking contest（层叠上下文）) --> Composite(合成层) --> GraphicsLayer图形层(GraphicsContext 负责输出位图(存储在共享内存中)，位图作为纹理传到GPU) --> GPU将多个位图合成draw到屏幕上
注意：合成层拥有单独的 GraphicsLayer，而其他不是合成层的渲染层，则和其第一个拥有GraphicsLayer 父层共用一个

渲染层(PaintLayer)

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

合成层

1. 每个DOM元素会有自己的布局信息Layout Object， 根据其布局信息的层级等关系，某些Layout Object会拥有共同的渲染层Paint Layer，某些Paint Layer又会拥有共同的合成层Composite Layer(Graphic Layers)。
2. DOM 树中得每个 Node 节点都有一个对应的 LayoutObject；拥有相同的坐标空间的 LayoutObjects，属于同一个渲染层（PaintLayer）。渲染层产生的最普遍条件是“层叠上下文”。
3. 产生合成层几个常见的场景：

• 有 3D transform;
• 对 opacity、fliter、transform 应用了 animation 或者 transition（需要是 active 的 animation 或者 transition，当 animation 或者 transition 效果未开始或结束后，提升合成层也会失效）;
• will-change 设置为 opacity、transform、top、left、bottom、right（其中 top、left 等需要设置明确的定位属性，如 relative 等
• overlap：元素覆盖在其他合成层元素上，则该元素被隐式提升为合成层

4. 渲染层是为保证页面元素以正确的顺序，合成层是为了减少渲染的开销。

• 提升为合成层
  好处