javascript - 第一次绘制如何发生在 DOMContentLoaded 之前？

Question

我的印象是第一次绘制发生在触发 DOMContentLoaded 事件之后。特别是，因为我认为为了让第一次绘制发生，需要渲染树，它依赖于 DOM 构造。另外，我知道 DOM 构造完成时会触发 DOMContentLoaded 事件。直到现在，我认为顺序是:

• domInteractive
• 延迟脚本执行
• DOMContentLoaded
• 第一次油漆
• 加载事件

但后来我遇到了这个线程:"Why First Paint is happening before DOMContentLoaded"人们体验不同秩序的地方。不幸的是，我不明白我错过了什么。

我正在尝试通过测试来重现 DCL 事件之前发生的第一次绘制，尽管我认为这种行为是违反理论的。如果有人可以帮助我提供一个工作示例，那就太完美了!

提前致谢!

Answer 1

我认为您的问题在于您试图将它们视为一个整洁有序的事件序列。

但这实际上不是它的工作原理。每个正在进行的进程基本上都是异步的，只要准备就绪就会触发。没有严格有序的顺序。

绘画与 HTML 分离，这是有充分理由的。

考虑一个非常大的 HTML 文档。如果您曾经在较慢的网络上加载过一个，您就会知道它会在元素准备就绪时开始显示，不一定要等待完整的 HTML 文件加载。

一旦下载并解析了完整的 HTML，就会显示 DOMContentLoaded。速度较慢的服务器实际上可能需要很长时间才能获取该文档，而且它不会永远停留在白屏上。

对于许多文档，尤其是小文档或加载速度非常快的文档，DOMContentLoaded 可能首先触发。在较大的一个上，它可能之前有一些油漆。