Browser - DOMContentLoaded event (page load)

Browser

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.

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');
});
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.





Discover More
Browser
Browser - Render blocking resources

All resources that are before the DomContentLoaded event are blocking the construction of the DOM. They are therefore known as render blocking resources They all have a render...
Browser
Browser - Rendering

Rendering is a page load phase that consists of generating an output that can be read by the client. Render tree building stage: The CSSOM and DOM trees are combined into a render tree. Before the...
Scroll Bar
Browser - Scroll

This page is scrolling in the internet context (http, html, javascript). Scrolling is implemented by the browser in response to: user interaction (scrollbar, click) or Javascript code. Via...
DOM - Document Loaded - onload event

The load event is an event that is fired / emitted on: an HTML element that fetch resources on the browser window when the page has finish loading. This event is a timing page load event To...
DOM - Ready event (Readiness|readyState)

A document is in a ready state when the DOM has been built. Any work that tries to interact with the DOM should wait for the DOM to be ready. HTML For an HTML page, in a browser, all images are not...
HTML - Data Block

data block are a way to embed data in a html document. The well known is ld-json data block Inject json data in pre-rendered HTML Static pre-generated by the server (ie pre-rendering), the...
Html Script Async Vs Defer
HTML - Defer attribute

defer is an boolean attribute of script element that indicates to the user agent (browser) that it should execute the script: after the DOM has been created (the HTML document read entirely and has...
Javascript - Module Loader (Script Loader)

A loader searches and loads module and script into the javascript engine (environment). From the main script, they will: create a dependency graph from the require and import statement find them...
Browser Devtool Performance Page Load Timing
Page Load Event (Timing)

Page load timing are events that occurs during a page load. The snapshot below is the timing timeline in the devtool performance tab of a page load. where: FP - is the first paint - the paint of...



Share this page:
Follow us:
Task Runner