javascript - 浏览器如何根据css样式生成CSSOM的细节？

Question

在a stackoverflow question说cssom和dom是同步生成的。如果cssom先生成，它怎么知道dom长什么样，生成一个cssom树，看起来像dom树加上css属性，如上图。为什么不根据css看起来像这样。

当我的html是这样的时候，我也可以用上面的样式；

即使我的 html 看起来像这样。

Answer 1

CSSOM 不需要知道关于 dom 的任何信息，因为 CSSOM 只是一棵样式规则树。

你指的是 Render Tree，它是在 DOM 和 CSSOM 准备好之后创建的。

为了更清楚:

1. 开始解析 HTML
2. 样式标 checkout 现
3. 解析器不会暂停 DOM 树的构建并开始构建 CSSOM 的过程
4. 构建 DOM 树 + 构建 CSSOM = 浏览器开始构建渲染树
5. 基于渲染树浏览器开始计算布局。
6. 在那幅画开始之后。