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

Question

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.org/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 completely 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 completely built. Async scripts, if any, have executed.
5. loadEventEnd // The UA has a fully completed 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?

Answer 1

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