Top Highlights

• DOMContentLoaded – the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures <img> and stylesheets may not yet have loaded.
• When the browser processes an HTML-document and comes across a <script> tag, it needs to execute before continuing building the DOM. That’s a precaution, as scripts may want to modify DOM, and even document.write into it, so DOMContentLoaded has to wait.
• External style sheets don’t affect DOM, so DOMContentLoaded does not wait for them.
• But there’s a pitfall. If we have a script after the style, then that script must wait until the stylesheet loads:
• The reason for this is that the script may want to get coordinates and other style-dependent properties of elements, like in the example above. Naturally, it has to wait for styles to load.

Domain