【DOM树】
【CSSOM树】
【Render-Tree渲染树】
总结步骤：
-
处理 HTML 标记，构建 DOM 树
-
处理 CSS 标记，构建 CSSOM 树
-
将 DOM 树和 CSSOM 树融合成渲染树
-
根据生成的渲染树，计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流 => 布局（Layout）或 重排（reflow）
-
根据渲染树以及回流得到的几何信息，得到节点的绝对像素 => 绘制（painting）
优化方案：
-
标签语义化和避免深层次嵌套
-
CSS选择器渲染是从右到左
-
尽早尽快地把CSS下载到客户端（充分利用HTTP多请求并发机制）
-
style -
link -
@import -
放到顶部
-
-
避免阻塞的JS加载
-
async -
defer -
放到底部
-
- 减少DOM的回流和重绘