About

DomContentLoaded ¹⁾ is a page load event that signals that the parser has finished the construction of the DOM.

The resources at the left or touching the blue line are blocking the construction of the DOM. They are known as render blocking resources.

This event broadcasts the readiness of the document (ie that the DOM was built), and all images may not be finished downloading, including banner ads.

Demo

• Send a message after the DOMContentLoaded event

document.addEventListener('DOMContentLoaded', (event) => {
    console.log('document load: DOMContentLoaded: DOM fully loaded and parsed');
});

• Send a message after the window load event to show that it's not the same and happens later when the page has finished loading

window.addEventListener('load', (event) => {
    console.log('window load: Window loaded');
});

Ready State

It broadcast the readiness of the document (ie that the DOM was built), and all images may not be finished downloading, including banner ads.