HTML
-
构建 DOM 树
浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换成浏览器能理解 的结构 - Dom 树。输入 document 可以查看 Dom 树。
CSS
- 样式计算
- 1.把 css 转成浏览器可理解的样式表 styleSheets; 输入 document.styleSheets 可以查看。
- 2.转换样式表中的属性值，使其标准化；因为 css 中有很多属性值如 blue,2em,不容易被浏览器 理解，需将其转成标准值。rgb(255,0,0) , 32 px;
- 3.计算出 Dom 树每个节点具体的样式；在浏览器中可通过 computed 查看。
- 布局阶段
- 1.创建布局树：布局树指只包含可见元素的树，如排除那些 display：none 的节点；
- 2.布局计算
- 分层
- 根据 z-index 进行分层；可从 chrome 的 Layers 查看
- 图层绘制
- 对每一层颜色、形状进行绘制；
- 栅格化（raster) 操作
- 当绘制列表生成后，主线程将其提交给合成线程，将图层分成图块（lite），并转化成位图。
- 显示
- 浏览器进程里面有一个叫 viz 的组件，根据合成进程发过来的信号，将页面内容绘制到内存，并将 内存的内容显示在屏幕。
相关概念
重排
更新了元素的几何属性，如改变元素的宽度、高度等，浏览器会重新触发布局、解析后一系列流程， 所以开销会比较大；
重绘
如改变元素的颜色，会省去布局和分层阶段，开销较小；
