javascript - Navigation Timing API. What's going on between domContentLoadedEventStart and domContentLoadedEventEnd? - S

admin管理员组

文章数量:1422504

W3C specifies a list of event and their corresponding timings that user agents must return if they want to support the Navigation Timing API.

A list you can see here:

Understanding which process relates to which events is pretty straight forward in most cases. But one thing that eludes me is what is going on between domContentLoadedEventStart and domContentLoadedEventEnd.

Here is what I have understood so far and base my reflections on:

1. domLoading // The UA starts parsing the document.
2. domInteractive // The UA has finished parsing the document. Users can interact with the page.
3. domContentLoaded // The document has been pletely loaded and parsed and deferred scripts, if any, have executed. (Async scripts, if any, might or might not have executed???)
4. domComplete // The DOM Tree is pletely built. Async scripts, if any, have executed.
5. loadEventEnd // The UA has a fully pleted page. All resources, like images, swf, etc, have loaded.

One should be able to deduce what happens after phase #3 (domContentLoaded) by understanding what triggered event #4 (domComplete) but did not trigger previous events.

So one would think that “Async scripts, if any, have executed” means that asynchronous scripts get executed after phase #3 but before event #4. But according to my tests, this is not what happens, unless my test is wrong. (I tried to replicate my test on JSFiddle, but I can’t make the defered/async script work since there is no way to add attribute on external scripts.)

So my question is: What process(es) takes place between domContentLoadedEventStart and domContentLoadedEventEnd?

W3C specifies a list of event and their corresponding timings that user agents must return if they want to support the Navigation Timing API.

A list you can see here: http://www.w3/TR/navigation-timing/#process

Understanding which process relates to which events is pretty straight forward in most cases. But one thing that eludes me is what is going on between domContentLoadedEventStart and domContentLoadedEventEnd.

Here is what I have understood so far and base my reflections on:

1. domLoading // The UA starts parsing the document.
2. domInteractive // The UA has finished parsing the document. Users can interact with the page.
3. domContentLoaded // The document has been pletely loaded and parsed and deferred scripts, if any, have executed. (Async scripts, if any, might or might not have executed???)
4. domComplete // The DOM Tree is pletely built. Async scripts, if any, have executed.
5. loadEventEnd // The UA has a fully pleted page. All resources, like images, swf, etc, have loaded.

One should be able to deduce what happens after phase #3 (domContentLoaded) by understanding what triggered event #4 (domComplete) but did not trigger previous events.

So one would think that “Async scripts, if any, have executed” means that asynchronous scripts get executed after phase #3 but before event #4. But according to my tests, this is not what happens, unless my test is wrong. (I tried to replicate my test on JSFiddle, but I can’t make the defered/async script work since there is no way to add attribute on external scripts.)

So my question is: What process(es) takes place between domContentLoadedEventStart and domContentLoadedEventEnd?

• javascript
• dom

Share Improve this question Follow edited Feb 21, 2014 at 22:37 ses 13.4k3131 gold badges129129 silver badges241241 bronze badges asked Feb 14, 2014 at 21:42 redrumredrum 49411 gold badge44 silver badges1414 bronze badges 1

• You gave a very good description of the document loading events – Dimon Commented Sep 3, 2016 at 22:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Those timings have to do with the domContentLoaded event(s). It's similar to the load event with loadEventStart and loadEventEnd. Instead of using load, you use DOMContentLoaded.

For example, adding a DOMContentLoaded event and running some code in it, should give you a different start and end.

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

Once that event is ran, the navigation timing API will return a different timestamp between the start and end times, depending on how long your event(s) take to run.

From the W3C documentation you pointed out, I believe there are no other processes going on with these timings.

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 pletes.

本文标签：