导航时序 API。在 domContentLoadedEventStart 和 domContentLoadedEventEnd 之间发生了什么？

Question

W3C规定了一系列事件及其对应的时间，如果用户代理想要支持导航时序API，则必须返回这些时间。你可以在这里查看这个列表：http://www.w3.org/TR/navigation-timing/#process。在大多数情况下，理解哪个过程与哪个事件相关是相当直接的。但有一件事让我困惑，那就是在domContentLoadedEventStart和domContentLoadedEventEnd之间发生了什么。以下是我目前所理解的，并基于此进行思考的内容：

1. domLoading // 用户代理开始解析文档。
2. domInteractive // 用户代理已完成解析文档。用户可以与页面交互。
3. domContentLoaded // 文档已完全加载和解析，延迟执行的脚本（如果有）已执行。（异步脚本（如果有）可能已执行，也可能未执行。）
4. domComplete // DOM 树已完全构建。异步脚本（如果有）已执行。
5. loadEventEnd // 用户代理已完全完成页面加载。所有资源（如图像、swf 等）都已加载。

通过理解触发事件 #4 (domComplete) 但未触发先前事件的内容，应该能够推断出第 3 阶段（domContentLoaded）之后会发生什么。

人们会认为，“异步脚本（如果有）已执行”意味着异步脚本在第三阶段之后但第四个事件之前被执行。但是根据我的测试，除非我的测试出错了，否则情况并非如此。(我尝试在JSFiddle上复制我的测试，但是由于没有办法在外部脚本中添加属性，因此我无法使延迟/异步脚本起作用。)

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

- redrum

---

你对文档加载事件的描述非常好。 - Dimon

Answer 1

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

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

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

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

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

domContentLoadedEventStart属性

此属性必须在用户代理在文档上触发DOMContentLoaded事件之前立即返回时间。

domContentLoadedEventEnd属性

此属性必须在文档的DOMContentLoaded事件完成后立即返回时间。

- Maxime Morin

---

好的，我明白了。这段文字涉及到浏览器执行DOMContentLoaded事件的JS代码回调期间。我的翻译不会改变原意，会尽量让内容更加通俗易懂。 - redrum