CSSOM 和 DOM 创建是异步的吗?
Is CSSOM and DOM creation asynchronous?
我读到 CSSOM 创建是网页性能方面的瓶颈。但似乎有一些解决方法,比如将 media
属性 添加到样式表 link。我试图了解如何优化我的网络应用程序并遇到了这个非常有趣的 link 但无法理解 CSSOM 和 DOM 创建的顺序。
Here 我看到一些关于异步加载 CSS 文件的参考,但答案不是很清楚。当然,这是关于加载而不是对象模型创建。
我的问题是:CSSOM 创建和 DOM 创建是并行发生还是顺序发生?
是的,CSSOM 和 DOM 创建是异步发生的,这是合乎逻辑的。我建议您从 Google Web fundamentals where topics like rendering 开始进行深入讨论和解释。
DOM 浏览器从网络请求中收到网页或从磁盘读取网页后,即开始构建。它启动 "parsing" html
和 "tokenizing" 它,创建我们知道的 DOM 节点树。
在解析和构建 DOM 树时,如果它在 head
或任何其他部分遇到 link 标记,则引用外部样式表。 (来自docs)
Anticipating that it will need this resource to render the page, it
immediately dispatches a request for this resource,...
- CSS 规则再次标记化并开始形成我们所说的 CSSOM。 CSSOM 树最终生成,因为整个网页被解析,然后 应用于 DOM 树中的节点。
When computing the final set of styles for any object on the page, the browser starts with the most general rule applicable to that node (e.g. if it is a child of body element, then all body styles apply) and then recursively refines the computed styles by applying more specific rules - i.e. the rules “cascade down”.
我们都注意到,在连接速度较慢时,DOM 先加载,然后应用样式,网页看起来已经完成。这是因为这个根本原因 - CSSOM 和 DOM 是 独立的 数据结构。
希望它能回答您的问题并为您指明正确的方向。
PS:我会再次强烈推荐通读 Google web performance fundamentals 以获得更好的见解。
我读到 CSSOM 创建是网页性能方面的瓶颈。但似乎有一些解决方法,比如将 media
属性 添加到样式表 link。我试图了解如何优化我的网络应用程序并遇到了这个非常有趣的 link 但无法理解 CSSOM 和 DOM 创建的顺序。
Here 我看到一些关于异步加载 CSS 文件的参考,但答案不是很清楚。当然,这是关于加载而不是对象模型创建。
我的问题是:CSSOM 创建和 DOM 创建是并行发生还是顺序发生?
是的,CSSOM 和 DOM 创建是异步发生的,这是合乎逻辑的。我建议您从 Google Web fundamentals where topics like rendering 开始进行深入讨论和解释。
DOM 浏览器从网络请求中收到网页或从磁盘读取网页后,即开始构建。它启动 "parsing"
html
和 "tokenizing" 它,创建我们知道的 DOM 节点树。在解析和构建 DOM 树时,如果它在
head
或任何其他部分遇到 link 标记,则引用外部样式表。 (来自docs)
Anticipating that it will need this resource to render the page, it immediately dispatches a request for this resource,...
- CSS 规则再次标记化并开始形成我们所说的 CSSOM。 CSSOM 树最终生成,因为整个网页被解析,然后 应用于 DOM 树中的节点。
When computing the final set of styles for any object on the page, the browser starts with the most general rule applicable to that node (e.g. if it is a child of body element, then all body styles apply) and then recursively refines the computed styles by applying more specific rules - i.e. the rules “cascade down”.
我们都注意到,在连接速度较慢时,DOM 先加载,然后应用样式,网页看起来已经完成。这是因为这个根本原因 - CSSOM 和 DOM 是 独立的 数据结构。
希望它能回答您的问题并为您指明正确的方向。
PS:我会再次强烈推荐通读 Google web performance fundamentals 以获得更好的见解。