DomContentLoaded 事件是否暗示构建 DOM 树或渲染树？答案

【问题标题】：Does the DomContentLoaded event imply construction of DOM tree or render tree?DomContentLoaded 事件是否暗示构建 DOM 树或渲染树？
【发布时间】：2018-02-28 18:16:17
【问题描述】：

当我分析我的应用时，事件会引发 1.5 秒，但第一个像素出现的时间要晚得多。这可能意味着该事件仅代表 DOM 树构造。但是这个教程现在让我有点困惑

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

【问题讨论】：

标签： javascript html

【解决方案1】：

我遇到了同样的问题，所以我阅读了你提供的谷歌开发者的文章。但是，我得出了一个不同的结论，这意味着 DOMContentLoaded 事件会在 dom 树准备好时触发，而无需等待 cssom 和渲染树。这是那篇文章的内容：

*An asynchronous script has several advantages:
The script is no longer parser blocking and is not part of the critical rendering path.
Because there are no other critical scripts, the CSS doesn't need to block the domContentLoaded event.
The sooner the domContentLoaded event fires, the sooner other application logic can begin executing.*

这意味着如果脚本不通过设置“异步”来停止 domtree 解析，则 domcontentloaded 事件甚至不会等待 css 加载或解析到 cssom。

【讨论】：

【解决方案2】：

当初始 HTML 文档完全加载和解析时，DOMContentLoaded 事件被触发，without waiting for stylesheets, images, and subframes to finish loading。

MDN Link

【讨论】：

这实际上与渲染无关，这是另一个单独的步骤。
浏览器在第一个 HTML 元素被解析后立即开始渲染页面。它当然不会等待 DOM 树完成，更不用说加载所有外部资源了。
是否有事件表明渲染树的构造？我不关心图像，所以加载事件对我没有用