CSSOM和DOM创建是异步的吗？

Question

我已经读到CSSOM创建是网页性能方面的瓶颈。但是似乎有一些解决方法，例如将media属性添加到样式表链接。我试图了解如何优化我的Web应用程序，并遇到了这个非常有趣的链接，但是无法理解CSSOM和DOM创建的顺序。

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

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

Answer 1

是的，CSSOM和DOM的创建是异步进行的，这只是逻辑上的。我建议您从Google Web基础知识入手，在其中深入讨论和解释诸如渲染之类的主题。

1. 一旦浏览器从网络请求中接收到网页或从磁盘中读取网页，DOM构建便开始。它开始对其进行“解析” html和“标记化”，从而创建我们知道的节点的DOM树。

2. 在解析和构造DOM树时，如果它在head或任何其他部分中遇到链接标记，请参考外部样式表。（来自docs）

预期它将需要此资源来呈现页面，因此它立即调度对此资源的请求，...

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

在计算页面上任何对象的最终样式集时，浏览器将从适用于该节点的最通用规则开始（例如，如果它是body元素的子代，则所有body样式都适用），然后递归地优化计算出的样式通过应用更具体的规则-即“级联向下”的规则。

我们都已经注意到，在连接速度较慢的情况下，首先会加载DOM，然后再应用样式，并完成网页外观。正是由于这个根本原因-CSSOM和DOM是独立的数据结构。

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

PS：我强烈建议再次通读Google网络性能基础知识，以获得更好的见解。