浏览器如何部分加载DOM和CSSOM？
首先让我简单地概述一下它是如何加载的，然后我会问关于这个的问题。
DOMContentLoaded浏览器获取HTML => 解析html => 创建节点 => 解析节点，并开始将它们转换为DOM元素 => 查找样式节点，因此在完成解析时开始创建CSSOM <代码>E 29 => E 110，如果有样式标记等待其构造CSSOM树<代码>E 211 => <代码>E 112E112，并触发E 213事件>E 117/代码>事件>E 218。
因此，总之，一旦CSSOM准备就绪，浏览器就开始呈现，并且可以增量地添加Dom。
这一切都很好，但是当浏览器开始呈现页面时，当不是整个html被加载时，流是如何进行的(例如，在nodejs中，可以部分html，然后等待2s，然后发送更多)。
- 如果页面底部还有另一个样式标签呢？没有收到所有html，也没有css浏览器会开始呈现，但据我所知，渲染只发生在cssom已经完全构建之后。
- 脚本标记发生了什么，如果css不完成，处理脚本标记就不会执行，因此也停止解析。JS是在CSSOM完成后运行的。
回答 3
Stack Overflow用户
发布于 2018-12-04 06:56:08
CSSOM停止解析。因此，后续脚本标记的执行，也延迟了呈现。
样式标记之前的脚本标记将在CSS从样式标记加载到CSSOM之前执行。
脚本标记之后的样式标记将改变CSSOM。如果脚本访问了正在被修改的样式，那么它读取的内容就过时了。秩序很重要。
解析将停止，而不仅仅是呈现。
JavaScript阻止解析，因为它可以修改文档。CSS无法修改文档，所以似乎没有理由阻止解析，对吗？ 但是，如果脚本要求提供尚未被解析的样式信息，该怎么办？浏览器不知道脚本将要执行什么-它可能要求类似DOM节点的背景色，这取决于样式表，或者它可能期望直接访问CSSOM。 因此，CSS可能会根据文档中外部样式表和脚本的顺序阻止解析。如果文档中的脚本前面有外部样式表，DOM和CSSOM对象的构造可能会相互干扰。当解析器到达脚本标记时，直到JavaScript完成执行，DOM构造才能继续，而在CSS下载、解析和CSSOM可用之前，JavaScript不能执行。
。
Stack Overflow用户
发布于 2015-12-13 22:48:40
事情可能会阻止DOMContentLoaded事件，但这并不会阻止不完整页面的呈现。这对于从慢速服务器上流出的非常长的页面来说可能很重要。
浏览器可以并确实将脚本执行、重新样式化、呈现与文档解析结合起来.这可以通过在<head>中执行javascript和查询DOM来显示，您将看到在触发DOMContentLoaded事件之前，文档不会有它的所有节点(可能甚至不是body元素)。
您必须将文档构造更多地看作是一个流，而不是在下一个块开始之前运行到完成的连续执行的块。
Stack Overflow用户
发布于 2021-01-01 05:53:38
以下是一些重要的事实：
- 当文档被主解析器完全解析并且DOM已经完全构建时，就会触发事件
DOMContentLoaded。 - 任何普通脚本(不是异步脚本或延迟脚本)都会有效地阻止DOM的构建。原因是脚本可能会改变DOM。
- 引用样式表既不是语法分析器阻塞，也不是DOM构造块。
- 如果在引用CSS之后添加了
<script>(无论是外部的还是内联的)，那么脚本的执行(而不是抓取)将被推迟，直到获取和解析CSS的工作完成，即使脚本的提取完成得更早。原因是脚本可能依赖于将要加载的CSS规则.所以浏览器必须等待。只有在这种情况下，CSS间接阻止文档解析器和DOM构造。 - 当浏览器在脚本上被阻塞时，第二个轻量级解析器将扫描其余的标记，寻找其他资源，如样式表、脚本、图像等，这些资源也需要检索。这叫“预装”。
https://stackoverflow.com/questions/34246357
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号