CSSOM tree如何生成的疑问

Question

在这篇文章中[关键渲染路径]提到构建CSSOM tree(https://bitsofco.de/understan...)

即由如下样式构建出如下的 CSSOM tree

body { font-size: 18px; }

header { color: plum; }
h1 { font-size: 28px; }

main { color: firebrick; }
h2 { font-size: 20px; }

footer { display: none; }

另外在 MDN 构建 CSSOM tree 中有如下说法:

第二步是处理 CSS 并构建 CSSOM 树。CSS 对象模型和 DOM 是相似的。DOM 和 CSSOM 是两棵树. 它们是独立的数据结构。

疑问：

1. CSSOM tree 是基于复制 DOM tree，然后根据 CSS 样式去附加一些属性吗？还是与 DOM tree 无关？完全独立的树？
2. 如果 CSS 样式是一些很复杂的选择器，如何构建 CSSOM tree 呢？

Answer 1

CSSOM tree与DOM tree是无关的，CSSOM tree的构建就是根据选择器的级联关系去构建的

https://www.jianshu.com/p/7c3...