对 DOMContentLoaded 事件的误解答案

【问题标题】：Misconception of DOMContentLoaded event对 DOMContentLoaded 事件的误解
【发布时间】：2023-03-06 12:20:01
【问题描述】：

来自MDN，我知道 DOMContentLoaded 不会等待样式表。

当初始 HTML 文档完全加载和解析时触发 DOMContentLoaded 事件，无需等待样式表、图像和子框架完成加载。

但来自varvy.com 和谷歌

一个常见的误解是样式与 domContentLoaded 无关，但根据 W3 HTML5 规范，这是不正确的

domContentLoaded：当 DOM 准备好并且 没有样式表阻碍 JavaScript 执行时标记点 - 这意味着我们现在可以（可能）构建渲染树。

domContentLoaded 通常标记 DOM 和 CSSOM 都准备好。

那么，哪一个是正确的？什么是阻止脚本的样式表？

【问题讨论】：

标签： html dom stylesheet domcontentloaded cssom

【解决方案1】：

必须执行所有内联 Javascript，因为它们会影响 dom.. 例如document.write。如果 JS 访问一些尚未加载的 CSS。另一种说法是“CSS 正在阻塞 JS”。所以 .. DOM 等待等待 CSS 加载的 JS。

DOM ----(等待)---> JS ----(等待)---> CSS

另一种说法：

DOM

因此阻塞的 CSS 必须在 domContentLoaded 之前加载！之后没有样式表会阻止 JavaScript 执行！现在粗体字有意义吗？

CSSOM are ready表示它已经准备好被DOM使用，所以没有被dom使用的CSS可以继续加载。

错误观念现在消除了吗？

【讨论】：