What is domContentLoaded?
- domContentLoaded is the point when both the DOM is ready and there are no stylesheets that are blocking JavaScript execution 1.
- This event typically marks when both the DOM and CSSOM are ready.
- This means that the render tree can now be built.
- If there is no parser blocking JavaScript then DOMContentLoaded will fire immediately after domInteractive.
Why measure domContentLoaded?
This event is useful in optimizing the critical rendering path by measuring the affect of parser blocking javascript.
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 2 and the domContentLoadedEventEnd 3 which let us know exactly how long it takes for domContentLoaded to occur.
Styles
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 4...)
If you want DOM to get parsed as fast as possible after the user had requested the page, some things you could do is turn your JavaScript asynchronous and to optimize loading of stylesheets which if used as usual, slow down page load due to being loaded in parallel, "stealing" traffic from the main html document.
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.
by