Browser - DOMContentLoaded event (page load)
Table of Contents
About
DomContentLoaded 1) 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.
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 seems that this is similar to the readiness of the document.
ie a document is in a ready state, all images are not finished downloading, including banner ads.