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

【问题标题】：How does browser loads DOM and CSSOM partially?浏览器如何部分加载 DOM 和 CSSOM？
【发布时间】：2016-03-18 17:07:09
【问题描述】：

首先让我简单概述一下它是如何加载的，然后我就问这个问题。

浏览器获取 HTML => 解析 html => 创建节点 => 解析节点并开始将它们转换为 Dom 元素 => 找到样式节点，然后开始创建 CSSOM => 在完成解析时，如果有样式标记，它会等待让它构造 CSSOM 树 => 一次两者都完成了，它合并了 DOM 和 CSSOM，并触发 DOMContentLoaded 事件。

总而言之，只要 CSSOM 准备就绪，浏览器就会开始渲染，并且可以逐步添加 Dom。

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

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

【问题讨论】：

渲染不必等待所有 CSS 可用。
developers.google.com/web/fundamentals/performance/… 根据这个 js，渲染发生在 cssom 完成后，cssom 阻塞一切的全部原因是 css 稍后可以更改输出，而稍后加载的 dom 元素不会改变输出，但只会添加到 dom 树中
据我了解：首先..解析和渲染是不同的阶段。 DOM 是增量构建的，这意味着无需加载整个 html 文件，只要字节从连接到达，它就会被解析。不是 CSS，首先获取整个 CSS 文件，然后进行解析。是的，CSS 链接/内联/嵌入会阻止解析。浏览器将等待 CSSOM 完成。在所有阻塞的 css/脚本都被获取执行/解析之后。只有在 DOMContentLoaded 被触发后，DOM/CSSOM 才被构建。现在开始造型和渲染。我在想他们只会阻止渲染，但不会阻止解析。
hacks.mozilla.org/2017/09/…
我的理解存在一些误区。构建完所有 CSSOM 后，JS 不会运行。只有 CSSOM 用于遇到的样式标签。脚本和样式标签按照声明的顺序执行（不使用延迟/异步）。

标签： html performance google-chrome dom

【解决方案1】：

事情可能会阻止DOMContentLoaded 事件，但这不会阻止呈现不完整的页面。这对于从慢速服务器流式传输的非常长的页面可能很重要。

浏览器可以交错执行脚本、重新设置样式、渲染文档解析。这可以通过在 <head> 中执行 javascript 并查询 DOM 来简单地展示，您将看到在 DOMContentLoaded 事件触发之前，该文档将没有其所有节点（甚至可能没有正文元素）。

您必须将文档构建更多地视为一个流，而不是在下一个块开始之前运行到完成的顺序执行块。

【讨论】：

CCSOM构建后不是JS跑了吗？
没有。脚本、html 解析、css 解析所有相互交错，取决于它们在 html 中的位置（以及许多其他因素）
是的，我同意它们确实会相互影响，但是我想了解一些规则，谷歌关于 udacity 的这门课程说 js 是在 cssom 构建完成后运行的。 udacity.com/course/viewer#!/c-ud884/l-1469569174/m-1524418577
@the8472 该声明的来源是什么？ Google specifically tells 浏览器延迟脚本执行和 DOM 构建直到它完成下载和构建 CSSOM
@Veehmot 阅读问题的上下文。 “总而言之，只要 CSSOM 准备就绪，浏览器就会开始渲染，并且可以逐步添加 Dom。” 是非常错误的。仅仅因为您没有在 DOMContentLoaded 的上下文中定义的完整 DOM 或 CSSOM，并不意味着没有可以呈现的内容，例如部分 CSS 状态。

【解决方案2】：

CSSOM 停止解析。因此执行后续的脚本标签，也会延迟渲染。

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

脚本标签之后的样式标签会改变 CSSOM。如果脚本访问正在更改的样式，那么它读取的内容已经过时。订单很重要。

停止解析而不仅仅是渲染。

JavaScript 会阻止解析，因为它可以修改文档。 CSS 无法修改文档，所以似乎没有理由阻止解析，对吧？

但是，如果脚本要求提供尚未提供的样式信息怎么办？解析了吗？浏览器不知道脚本要做什么执行——它可能会要求类似 DOM 节点的背景色这取决于样式表，或者它可能期望访问 CSSOM 直接。

因此，CSS 可能会阻塞解析，具体取决于文档中的外部样式表和脚本。如果有放置在文档中脚本之前的外部样式表， DOM 和 CSSOM 对象的构造会相互干扰。当解析器到达脚本标签时，DOM 构建无法继续直到 JavaScript 完成执行，并且 JavaScript 不能被执行直到 CSS 被下载、解析并且 CSSOM 被可用

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

【讨论】：

如果停止解析，是不是也停止了渲染？
但这似乎不是真的。即使整个文档还没有被解析，渲染（对于已经解析的任何内容）也会发生。
是的，没错。但是我读过/误解了 JS 在页面上的所有 css 都被解析和应用后运行。在 CSSOM 之后运行 JS 是有冲突的，但答案都是正确的，但有一个区别； JS 在 CSSOM 完成后运行，但只有在它之前的 CSS，它不是所有的 css。

【解决方案3】：

几个重要的事实：

当文档已被 main 解析器完全解析并且 DOM 已完全构建时，将触发事件 DOMContentLoaded。
任何普通脚本（非异步或延迟）都会有效地阻止 DOM 构建。原因是脚本可能会改变 DOM。
引用样式表既不是解析器阻塞也不是 DOM 构造阻塞器。
如果在引用 CSS 后添加 <script>（无论是外部的还是内联的），脚本的执行（不获取）会延迟到 CSS 的获取和解析完成即使脚本的提取更快完成。原因是脚本可能依赖于待加载的 CSS 规则。所以浏览器必须等待。只有在这种情况下，CSS 才会间接地阻塞文档解析器和 DOM 构造。
当浏览器在脚本上被阻止时，第二个轻量级解析器会扫描标记的其余部分以寻找其他资源，例如样式表、脚本、图像等，也需要检索。这称为“预加载”。

【讨论】：

需要注意的是，即使样式是在脚本标签之前声明的，或者在脚本标签之前链接了一个大的css文件，domcontentloaded事件可能会在css样式被解析之前触发。要解决这个问题，您需要在 js 代码的开头执行 forced css repaint。