浏览器如何部分加载 DOM 和 CSSOM？

Question

首先让我给你一个简单的概述它是如何加载的，然后我会问关于这个的问题。

浏览器获取 HTML =>解析 html =>创建节点=>解析节点并开始将它们转换为 Dom 元素=>找到样式节点，因此开始创建 CSSOM =>完成解析，如果有样式标签，它等待让它构建 CSSOM 树= >一旦两者都完成，它会合并 DOM 和 CSSOM，并触发DOMContentLoadedEvent。

所以总而言之，一旦 CSSOM 准备就绪，浏览器就会开始渲染，并且可以增量添加 Dom。

这一切都很好，但是当没有加载整个 html 时，浏览器开始渲染页面时流程如何..（例如在 nodejs 中，您可以部分 html 然后等待 2 秒，然后发送更多）

1. 如果页面底部有另一个样式标签怎么办？没有收到所有的 html，也没有 css 浏览器会开始渲染，但根据我的理解，渲染只发生在 cssom 完全构建之后。
2. 脚本标签会发生什么，如果 css 没有完成处理脚本标签不会被执行，因此也会停止解析。CSSOM 完成后运行 JS。

Answer 1

CSSOM 停止解析。从而执行后续的脚本标签，并且还会延迟渲染。

\n\n

样式标签之前的脚本标签将在 CSS 从样式标签加载到 CSSOM 之前执行。

\n\n

脚本标签后面的样式标签将改变 CSSOM。如果脚本访问正在更改的样式，那么它读取的内容就会过时。顺序很重要。

\n\n

解析停止不仅仅是渲染。

\n\n

\n

JavaScript 会阻止解析，因为它可以修改文档。CSS\n 可以\xe2\x80\x99t 修改文档，所以看起来它没有理由\n 阻止解析，对吗？

\n\n

但是，如果脚本请求的样式信息尚未解析\xe2\x80\x99，该怎么办？浏览器\xe2\x80\x99不知道脚本将要\n执行\xe2\x80\x94它可能会要求类似于DOM节点\xe2\x80\x99s背景颜色\n的内容，这取决于样式表，或者它可能期望直接访问 CSSOM\n。

\n\n

因此，CSS 可能会根据文档中外部样式表和脚本的顺序来阻止解析。如果文档中的脚本之前放置了\n 外部样式表，\n DOM 和 CSSOM 对象的构造可能会相互干扰。\n 当解析器到达脚本标记时，\n DOM 构造无法继续，直到 JavaScript 执行完毕为止。完成执行，在下载、解析 CSS 且 CSSOM 可用之前，\n 无法执行 JavaScript

\n

\n\n

。

\n\n

https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/

\n