JavaScript Events: DOMContentLoaded vs load

JavaScript provides developers various events that can be used to interact with the DOM at different stages of page load. Most programmers are familiar with the 'load' event listener in JavaScript, which is typically used to load data, render content, or do some kind of validation when the page first loads.

Two of the most commonly used event handler methods for this are the 

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.

What is DOMContentLoaded?

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.

Use cases for both

Both methods are very important in terms of being able to .

The load event is typically ideal for:

- Scripts that require the entire page to be loaded first
- Initializing UI/UX elements that depend on other elements first

The DOMContentLoaded event is ideal for:

- Improving the user experience by making the page interactive sooner
- Initializing JavaScript code that will manipulate the DOM
- Setting up all event listeners that don't have any dependency on external resources

Common mistakes

The biggest mistake that developers make when working with page load events is that they default to the 'load' event 100% of the time and never even consider using DOMContentLoaded, mainly because it's simpler to just use the 'load' event.

But web pages tend to grow in complexity and resources usually, and not the other direction, meaning that the 'load' event functions will eventually be pushed further and further down the time to first byte.

Conclusion

Most developers that I know use the 'load' handler regardless of scenario, mainly because 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.