浏览器的渲染步骤

浏览器渲染步骤

1. 构建DOM树 ，生成DOM树
2. 样式计算， StyleRules
3. 布局阶段，生成Render Tree
4. 分层
5. 光栅化
6. 合成

构建DOM树

渲染进程中的HTML解释器会将HTML文档转成DOM树，网络进程下载了多少HTML文档，HTML解释器就会解析多少

样式计算

当渲染进程接收到CSS文档的时候，会把CSS文档转换成StyleSheets，将属性值标准化

创建布局树

遍历DOM树中的所有节点，把所有可见的节点放入布局中，忽略不可见的节点，然后计算布局树中的节点的坐标位置

分层

渲染进程为特定的节点生成专用的图层，生成一颗图层树

栅格化

渲染进程中的合成线程会把图层划分为图块，然后栅格化会在视口附近优先生成位图，栅格化把图块转成位图，栅格化会在GPU中加速，

合成

当所有图块都栅格化以后，合成线程会生成一个绘制图块的”DrawQuad“命令，并把这个命令发送给浏览器进程，浏览器进程里有一个viz组件，用来接收合成线程发过来的”DrawQuad“命令，然后根据命令把页面内容存在内存中，显示到屏幕上