CSSOM和DOM创建是异步的吗？ [英] Is CSSOM and DOM creation asynchronous?

问题描述

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

I have read that CSSOM creation is a bottleneck in terms of web page performance. But there seems to be some ways around it, like adding the media property to the stylesheet link. I'm trying to understand how to optimise my web app and came across this really interesting link but couldn't understand what order CSSOM and DOM creation happen in.

Here I see some reference to asynchronous loading of CSS files, but the answer is not very clear. Of course, that is about loading and not object model creation.

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

My question is this: Does the CSSOM creation and DOM creation happen in parallel or in sequence?

推荐答案

是的，CSSOM和DOM的创建是异步进行的，这只是合乎逻辑的。我建议您从 Google Web基础开始，其中的主题如渲染

Yes, the CSSOM and DOM creation happens asynchronously and it is only logical. I would recommend you start off at Google Web fundamentals where topics like rendering are discussed and explained in depth.

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

1. DOM Construction starts as soon as the browser receives a webpage from a network request or reads it off the disk. It starts "parsing" the html and "tokenizing" it, creating a DOM tree of nodes that we are aware of.

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

While parsing and constructing the DOM tree, if it encounters a link tag in the head or any other section for that matter, referencing an external stylesheet. (from the docs)

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

Anticipating that it will need this resource to render the page, it immediately dispatches a request for this resource,...

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

1. The CSS rules are again tokenized and start forming what we call a CSSOM. The CSSOM tree is then generated finally as the entire webpage is parsed and then applied to the nodes in DOM tree.

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

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是独立的数据结构。

We have all noticed that on slow connections, the DOM loads first and then styles are applied and webpage looks finished. It is because of this fundamental reason - The CSSOM and DOM are independent data structures.

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

I hope it answers your question and points you in the right direction.

PS：我强烈建议再次阅读 Google网络性能基础以获取更好的见解。

PS: I would strongly recommend again, to read through Google web performance fundamentals to gain better insights.

这篇关于CSSOM和DOM创建是异步的吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！