渲染流程

生成浏览器识别的DOM树

样式计算

生成浏览器识别的styleSheets

层叠样式表标属性准化（css中 em转换成px 等）

计算DOM树中的每个节点具体样式（涉及到 CSS 的继承规则和层叠规则）

布局阶段

计算布局树

你可能注意到了 DOM 树还含有很多不可见的元素，比如 head 标签，还有使用了 display:none 属性的元素。所以在显示之前，我们还要额外地构建一棵只包含可见元素布 局树。

布局计算（计算布局树节点的坐标位置了）

渲染阶段

分层（渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree））

图层绘制

栅格化操作

合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执 行的。所谓栅格化，是指将图块转换为位图。 栅格化过程都会使用 GPU 来加速生成，使用 GPU 生成位图的过程叫快速栅格化， 或者 GPU 栅格化，生成的位图被保存在 GPU 内存中 渲染进程把生成图块的指令发送给 GPU，然后在 GPU 中执行生成图块 的位图，并保存在 GPU 的内存中

合成和显示

一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”， 然后将该命令提交给浏览器进程 浏览器进程里面有一个叫 viz 的组件，用来接收合成线程发过来的 DrawQuad 命令，然后 根据 DrawQuad 命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上

渲染流程总结

1. 渲染进程将 HTML 内容转换为能够读懂的DOM 树结构。
2. 渲染引擎将 CSS 样式表转化为浏览器可以理解的styleSheets，计算出 DOM 节点的样式。
3. 创建布局树，并计算元素的布局信息。
4. 对布局树进行分层，并生成分层树。 5. 为每个图层生成绘制列表，并将其提交到合成线程。
5. 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
6. 合成线程发送绘制图块命令DrawQuad给浏览器进程。
7. 浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。