• 构建 DOM 树
  • 浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树
  • 控制台里输入 document，打印结果就是一个完整的 DOM 树结构
  • DOM 是保存在内存中的树状结构，可以通过 JavaScript 查询或修改其中内容
• 样式计算 构建 CSSOM 树
  • 把 CSS 转换为浏览器能够理解的结构
    • 浏览器同样无法直接理解纯文本的 CSS 样式，当渲染引擎接收到 CSS 文件时，会执行一个转换操作，将CSS文本转换为浏览器可以理解的结构——styleSheets，可通过控制台打印 document.styleSheets 查看，并且具备查询和修改功能
  • 转换样式表的属性值，使其标准化
    • 属性标准化：CSS 文本中有很多属性值，需要讲所有值转换为渲染引擎容易理解的、标准化的计算值。
  • 计算出 DOM 树中每个节点的具体样式
    • CSS 继承：每个 DOM 节点都包含有父节点的样式
    • CSS 层叠：定义了如何合并来自多个源的属性值的方法
• 布局阶段 创建布局树
  • 创建布局树
    • ⚠️：DOM 树中所有不可见的节点都并没有包含到布局树中
    • 遍历DOM树中所有可见节点，并添加到布局树中
    • 不可见节点会被布局树忽略掉。因为属性包含 display: none
  • 布局计算