“DOMContentLoaded” vs “load” – What are the differences?

I was looking at the network tab inside Chrome developer tools, and I found this image before me, inside the “Network” tab:

none

If we look at the timeline, we see 2 lines. One is blue and the other one is red. Looking at the footer from that same panel, we see the blue one is called “DOMContentLoad” and the red one is called “Load”. But what is the difference between them?

DOMContentLoad: This is the time it takes to download all the DOM tree, and parse it. This means not only download the content of the HTML file, as in its characters, but also the time it takes to understand the relationship between the nodes of the DOM and form the tree structure inside Chrome. Basically to form the DOM hierarchy.

Load: This event includes all things from DOMContentLoad, and includes also all the sub-resources included in the document. This means: CSS files, JS files, images, iframes, etc… Basically all that is needed for the page to render completely.

From a Javascript and jQuery point of view, DOMContentLoad is enough most of the times to start executing. This is the reason why most jQuery code is attached to the event “ready”, which fires with “DOMContentLoad”.

On the other side, if some code needs to access things like the size of an image, or the CSS attribute of a certain DOM node, waiting for the “load” event is necessary, since this information will not be available until this event fires.

If you want to understand better how these events are fired, here is a great demo for it.

Hopefully now you have a better understanding of what these 2 events mean, and they help you know better how your own websites work and perform.

Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *