Performance is key

Difference between DOMContentLoaded and load

Written by

Walter G.

Published on

August 02 2021

Modified on

March 20 2022

Filed under

javascript

Most programmers are familiar with the 'load' event listener in JavaScript. It's typically used to load data, render content, or do some kind of validation when the page first loads.

window.addEventListener('load', do something...

It's essentially how we initialize anything and everything that we need in order to get a webpage to run and render and it runs after the page has been fully loaded.

If for example, you need to access a DOM element within your JavaScript, then doing so in the 'load' event would be the place to do so.

<div id='div1'></div>

<script>
    window.addEventListener('load', function(){
        document.getElementById('div1').innerHTML = 'Initialized';
    });
</script>

The 'load' event handler has one slight issue with it though. It's too restrictive. It waits for all resource files to load before running the code.

And depending on the number of resources (css, js and image files) that you have, you might be waiting a while.

This is where DOMContentLoaded makes its appearance. Because the DOMContentLoaded event fires when the initial HTML document loads, without having to wait for stylesheets, images or frames to load first.

Most of the time when you use the 'load' event handler, more than likely you should actually be using the DOMContentLoaded handler instead. This can ensure a faster loading experience to your users overall.

But that does not mean that 'load' is flawed and should never be used. Because there are certain scenarios in which you need the browser to finish downloading all resource files before continuing.

One of those situations is if you need to get the final rendered styling of an element on the page in order to perform some action on it. In this case, you do need to wait for the CSS files to load and to style the elements appropriately before you are able to retrieve those values in JavaScript.

<div id='div1'></div>

<script>
    window.addEventListener('load', (event) => {
    let el = document.getElementById('div1');

    let height = el.style.height; // after css loads
});
</script>

In this scenario, assuming that the height of the element was set in a css file, you would need to use the load event handler.

Most developers that I know use the 'load' handler regardless of scenario, mainly it's short to type and because it always works. But with the web going more mobile first by the day and with performance and speed becoming more important factors for search engines, it might be time to take into consideration whether you really meant DOMContentLoaded.

Comments

No messages posted yet

Add comment