浏览器绘图模型的解释：renderObject、renderlayer

先来看这幅经典的图：

https://juejin.im/entry/590801780ce46300617c89b8

renderObject相当于iOS 的view

renderlayer完成了一次模拟合成：

将在合成时无需特殊处理几个renderObject整合成一个renderlayer管理的数组，在具体绘制时直接合成即可；

每一个单独的renderlayer和它的父子renderlayer都不能直接合成，需要做特殊的处理；

renderlayer管理的一个或多个视图作为一个整体，标志着和其它renderlayer合成时需要做特殊处理。

将renderlayer模拟的renderObject合成称为：静态常规合成；

将多个renderlayer模拟的合成称为：静态特殊合成；

Graphics Layer(又称Compositing Layer)：成为动静特殊合成；

由此推断：合成的过程分为三步走：

1、将不需要特殊处理能合成的直接合成为一个renderlayer；

2、将不能直接合成的多个静态renderlayer特殊处理后合成为一个Graphics Layer；

3、将静态的Graphics Layer和动态的Graphics Layer进行动静控制合成完成最终的合成。

之所以这样做是为了保证动态部分的单独渲染。

首先我们有DOM树，但是DOM树里面的DOM是供给JS/HTML/CSS用的，并不能直接拿过来在页面或者位图里绘制。因此浏览器内部实现了Render Object：

每个Render Object和DOM节点一一对应。Render Object上实现了将其对应的DOM节点绘制进位图的方法，负责绘制这个DOM节点的可见内容如背景、边框、文字内容等等。同时Render Object也是存放在一个树形结构中的。

https://juejin.im/entry/590801780ce46300617c89b8

RenderObject 生成 RenderLayer 的条件，来自 GPU Accelerated Compositing in Chrome

• It’s the root object for the page
• It has explicit CSS position properties (relative, absolute or a transform)
• It is transparent
• Has overflow, an alpha mask or reflection
• Has a CSS filter
• Corresponds to canvas element that has a 3D (WebGL) context or an accelerated 2D context
• Corresponds to a video element

浏览器渲染引擎遍历 Layer 树，访问每一个 RenderLayer，再遍历从属于这个 RenderLayer 的 RenderObject，将每一个 RenderObject 绘制出来。读者可以认为，Layer 树决定了网页绘制的层次顺序，而从属于 RenderLayer 的 RenderObject 决定了这个 Layer 的内容，所有的 RenderLayer 和 RenderObject 一起就决定了网页在屏幕上最终呈现出来的内容。

https://www.zhoulujun.cn/html/webfront/browser/webkit/2015_1213_358.html