【发布时间】：2016-12-15 00:34:10
【问题描述】：
我了解到 CSSOM 创建是网页性能方面的瓶颈。但似乎有一些方法可以解决它，比如将media 属性添加到样式表链接。我试图了解如何优化我的网络应用程序并遇到了这个非常有趣的link，但无法理解 CSSOM 和 DOM 创建的顺序。
Here我看到一些关于异步加载CSS文件的参考，但答案不是很清楚。当然，这是关于加载而不是对象模型的创建。
我的问题是：CSSOM 创建和 DOM 创建是并行还是顺序发生的？
【问题讨论】：
【发布时间】：2016-12-15 00:34:10
【问题描述】：
是的，CSSOM 和 DOM 的创建是异步发生的，这只是合乎逻辑的。我建议您从Google Web fundamentals 开始，在那里深入讨论和解释rendering 等主题。
只要浏览器从网络请求接收到网页或从磁盘读取网页，DOM 构建就会开始。它开始“解析”
html并“标记”它，创建一个我们知道的节点 DOM 树。在解析和构建 DOM 树时，如果在
head或任何其他部分中遇到链接标记，则引用外部样式表。 （来自docs）
预计它将需要此资源来呈现页面，它 立即分派对该资源的请求，...
- CSS 规则再次被标记化并开始形成我们所说的 CSSOM。 CSSOM 树最终生成，整个网页被解析并然后应用于 DOM 树中的节点。
当计算页面上任何对象的最终样式集时，浏览器从适用于该节点的最通用规则开始（例如，如果它是 body 元素的子元素，则应用所有 body 样式），然后递归地细化通过应用更具体的规则来计算样式 - 即规则“cascade down”。
我们都注意到，在慢速连接上，首先加载 DOM，然后应用样式，网页看起来就完成了。正是因为这个根本原因——CSSOM 和 DOM 是独立的数据结构。
我希望它能回答您的问题并为您指明正确的方向。
PS：我强烈建议再次阅读Google web performance fundamentals 以获得更好的见解。
【讨论】：
-
谢谢。实际上，当我进行此查询时，我正在研究 Google 网络性能基础知识。它已在问题中被引用:)