CSSOM和DOM创建是异步的吗？

Question

我读过CSSOM的创建是影响网页性能的瓶颈。但是似乎有一些方法可以绕过它，比如将media属性添加到样式表链接中。我试图了解如何优化我的web应用程序，并遇到了这个非常有趣的链接，但我无法理解CSSOM和DOM创建的顺序。

这里我看到了一些关于异步加载CSS文件的参考，但是答案不是很清楚。当然，这是关于加载而不是对象模型创建。

我的问题是: CSSOM创建和DOM创建是并行的还是顺序的？

Answer 1

是的，CSSOM和DOM的创建是异步进行的，这是逻辑的。我建议您从Google基础开始，在那里深入讨论和解释像渲染这样的主题。

1. 一旦浏览器接收到来自网络请求的网页或从磁盘读取网页，就会启动。它开始“解析”html并“标记”它，创建一个我们知道的节点的DOM树。
2. 在解析和构造DOM树时，如果遇到head或任何其他部分中的链接标记，则引用外部样式表。(来自文档)

考虑到它将需要这个资源来呈现页面，它会立即为这个资源发出一个请求，

1. CSS规则再次被标记化，并开始形成我们所称的CSSOM。然后，在解析整个网页并将应用于DOM树中的节点时，最终生成CSSOM树。

当计算页面上任何对象的最后一组样式时，浏览器从适用于该节点的最一般规则开始(例如，如果它是body元素的子元素，那么所有的body样式都会应用)，然后递归地通过应用更具体的规则来细化计算的样式--即规则“级联”。

我们都注意到，在缓慢的连接上，首先加载DOM，然后应用样式，网页看起来就完成了。正因为如此，CSSOM和DOM是独立于的数据结构。

我希望它能回答你的问题，为你指明正确的方向。

PS:我强烈建议再读一遍Google性能基础，以获得更好的见解。