整体流程
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 的元素
合成层
- 每个DOM元素会有自己的布局信息Layout Object, 根据其布局信息的层级等关系,某些Layout Object会拥有共同的渲染层Paint Layer,某些Paint Layer又会拥有共同的合成层Composite Layer(Graphic Layers)。
- DOM 树中得每个 Node 节点都有一个对应的 LayoutObject;拥有相同的坐标空间的 LayoutObjects,属于同一个渲染层(PaintLayer)。渲染层产生的最普遍条件是“层叠上下文”。
- 产生合成层几个常见的场景:
- 有 3D transform;
- 对 opacity、fliter、transform 应用了 animation 或者 transition(需要是 active 的 animation 或者 transition,当 animation 或者 transition 效果未开始或结束后,提升合成层也会失效);
- will-change 设置为 opacity、transform、top、left、bottom、right(其中 top、left 等需要设置明确的定位属性,如 relative 等
- overlap:元素覆盖在其他合成层元素上,则该元素被隐式提升为合成层
- 渲染层是为保证页面元素以正确的顺序,合成层是为了减少渲染的开销。
- 提升为合成层
好处