导航计时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等,都已加载.

domContentLoaded通过了解触发事件#4(domComplete)但未触发先前事件的内容,应该能够推断出阶段#3()之后发生的事情.

因此,人们会认为"异步脚本(如果有的话,已执行")意味着异步脚本在阶段#3之后但在事件#4之前执行.但根据我的测试,这不是发生的事情,除非我的测试是错误的.(我尝试复制我的测试JSFiddle,但我无法使deferred/async脚本工作,因为无法在外部脚本上添加属性.)

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

Answer 1

这些时间与domContentLoaded事件有关.它load与loadEventStart和的事件 类似loadEventEnd.而不是使用load,你使用DOMContentLoaded.

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

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

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

从你指出的W3C文档中,我相信没有其他流程继续这些时间.

domContentLoadedEventStart属性

此属性必须返回用户代理在Document处触发DOMContentLoaded事件之前的时间.

domContentLoadedEventEnd属性

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