浏览器绘图模型的解释：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
