渲染流程： HTML,CSS,JavaScript 是如何变成页面的？

渲染流程： HTML,CSS,JavaScript 是如何变成页面的？

构建 DOM 树

1. 输入：HTML 文档；
2. 处理：HTML 解析器解析；
3. 输出：DOM 数据解构。

样式计算

处理CSS 文本，属性值标准化，每个节点具体样式（继承、层叠），生成styleSheets(CSSOM)

布局(DOM 树中元素位置)

1. DOM & CSSOM 合并成渲染树；
2. 布局树（DOM 树中的可见元素）；
3. 布局计算。

分层

1. 特定节点生成专用图层，生成一棵图层树；
2. 拥有层叠上下文属性（明确定位属性、透明属性、CSS 滤镜、z-index 等）的元素会创建单独图层；
3. 没有图层的 DOM 节点属于父节点图层；
4. 需要剪裁的地方也会创建图层。
   

绘制指令<