What is domContentLoaded?
- This event typically marks when both the DOM and CSSOM are ready.
- This means that the render tree can now be built.
Why measure domContentLoaded?
The domContentLoaded event typically means that the render tree can begin to be built. If our goal is to get to this point as quickly as possible (as it likely should be) then knowing when our page gets to this point is helpful.
In fact we can time this event with even more precision by using domContentLoadedEventStart and the domContentLoadedEventEnd which let us know exactly how long it takes for domContentLoaded to occur.
A common misconception is that styles have no bearing on domContentLoaded, but that is untrue according to the W3 HTML5 specification.
The events that lead up to domContentLoaded require that there are no stylesheets blocking scripts. From the spec:
Spin the event loop until the first script in the list of scripts that will execute when the document has finished parsing has its “ready to be parser-executed” flag set and the parser’s Document has no style sheet that is blocking scripts.
Speeding this up
(from the Mozilla domContentLoaded page)
What happened just before domContentLoaded?
Just prior to the domContentLoaded, the browser fired the domInteractive timestamp.
What happens immediately after domLoading?
Assuming all goes well, the next step is domComplete.