javascript - 导航计时 API。 domContentLoadedEventStart 和 domContentLoadedEventEnd 之间发生了什么？

Question

W3C 指定了一个事件列表及其对应的时间，用户代理如果想要支持 Navigation Timing API 就必须返回这些事件。 .

您可以在此处查看列表:http://www.w3.org/TR/navigation-timing/#process

在大多数情况下，了解哪个过程与哪些事件相关是非常简单的。但有一件事让我感到困惑，那就是 domContentLoadedEventStart 和 domContentLoadedEventEnd 之间发生了什么。

以下是我目前的理解和思考:

1. domLoading//UA 开始解析文档。
2. domInteractive//UA 已完成对文档的解析。用户可以与页面交互。
3. domContentLoaded//文档已经完全加载并且已解析和延迟的脚本(如果有)已执行。 (异步脚本，如果有的话，可能会或可能不会执行？？？)
4. domComplete//DOM 树已完全构建。异步脚本，如果任何，已执行。
5. loadEventEnd//UA 有一个完全完成的页面。所有资源，图片、swf 等已加载。

通过理解什么触发了事件 #4 (domComplete) 但没有触发之前的事件，应该能够推断出阶段 #3 (domContentLoaded) 之后发生的事情。

所以有人会认为“异步脚本(如果有的话)已执行”意味着异步脚本在阶段 #3 之后但在事件 #4 之前执行。但是根据我的测试，这不会发生，除非我的测试是错误的。 (我试图在 JSFiddle 上复制我的测试，但我无法使延迟/异步脚本工作，因为无法在外部脚本上添加属性。)

所以我的问题是:domContentLoadedEventStart 和 domContentLoadedEventEnd 之间发生了什么过程？

Answer 1

这些时间与 domContentLoaded 事件有关。它类似于带有 loadEventStart 和 loadEventEnd 的 load 事件。您不使用 load，而是使用 DOMContentLoaded。

例如，添加一个 DOMContentLoaded 事件并在其中运行一些代码，应该会给您一个不同的开始和结束。

document.addEventListener("DOMContentLoaded", function(event) {
    var j = 0;
    for (var i = 0; i < 10000000; i++) {
        j = i;
    }
});

该事件运行后，导航计时 API 将在开始时间和结束时间之间返回不同的时间戳，具体取决于您的事件运行时间。

根据您指出的 W3C 文档，我相信这些时间没有其他进程在进行。

domContentLoadedEventStart attribute

This attribute must return the time immediately before the user agent fires the DOMContentLoaded event at the Document.

domContentLoadedEventEnd attribute

This attribute must return the time immediately after the document's DOMContentLoaded event completes.