ProgrammingJavascriptCareerProductivityGadgetsASP.NETWeb Design
Performance is key

Difference between DOMContentLoaded and load

Written by
Published on
Modified on

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>

    window.addEventListener('load', function(){
        document.getElementById('div1').innerHTML = 'Initialized';

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>

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

    let height =; // after css loads

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.

Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.


No messages posted yet

Stay up to date. Get informed of the latest happenings in the development world.

Another solid bundle for developers! Start at $1. Pay what you want and get up to 18 Ruby books for your collection.

If you buy something through a link, we may earn a commission

Add a comment

Send me your weekly newsletter filled with awesome ideas