load-domcontentloaded-event.md

The load event and the DOMContentLoaded event are both fired when loading a webpage, but they represent different stages of that process.

DOMContentLoaded

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Example:

document.addEventListener("DOMContentLoaded", function() {
  console.log("DOM fully loaded and parsed");
});

Pros:

• Fires as soon as the DOM is ready, which can be faster than waiting for the load event if there are many large resources to load.

Cons:

• Does not wait for stylesheets, images, and subframes to finish loading, which can be a problem if your JavaScript code relies on these resources.

Use cases:

The DOMContentLoaded event is commonly used in scenarios where you need to manipulate the DOM or initialize your JavaScript application as soon as the HTML document has been fully loaded and parsed, but before all the stylesheets, images, and other resources have finished loading. Here are some common use cases:

1. Initializing JavaScript UI Libraries or Frameworks: Libraries like jQuery, React, Vue.js, or Angular often need to wait until the DOM is fully parsed before they can initialize and render components or bind event handlers.

document.addEventListener("DOMContentLoaded", function() {
  ReactDOM.render(<App />, document.getElementById('root'));
});

2. Manipulating the DOM: If you need to add, remove, or modify elements in the DOM, you should wait until the DOM is fully loaded.

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById('myElement').innerHTML = 'Hello, World!';
});

3. Adding Event Listeners to DOM Elements: If you're adding event listeners to elements that are declared in your HTML, you need to wait until those elements are available in the DOM.

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button clicked!');
  });
});

4. Fetching Data: If you're fetching data from a server and displaying it on your page, you might want to start the fetch as soon as the DOM is ready.

document.addEventListener("DOMContentLoaded", function() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data));
});

Remember, DOMContentLoaded event fires as soon as the HTML document is fully loaded and parsed, which can be significantly earlier than the load event if there are many large resources (like images or stylesheets) to load.

load

The load event is fired when the whole webpage has loaded, including all dependent resources such as stylesheets and images.

Example:

window.addEventListener("load", function() {
  console.log("All resources finished loading!");
});

Pros:

• Ensures all resources, including images and stylesheets, have loaded.

Cons:

• Can take longer to fire, especially if the page includes large resources.

Use cases:

The load event is used when you need to execute JavaScript code after the entire page has loaded, including all dependent resources such as stylesheets, images, and scripts. Here are some common use cases:

1. Image Processing: If you're working with images and need to process them (like getting their width and height or manipulating them in some way), you should wait until the images are fully loaded.

window.addEventListener("load", function() {
  var img = document.querySelector('img');
  console.log(img.width, img.height);
});

2. Working with External Scripts: If your JavaScript code relies on scripts loaded from an external source, you might want to wait until all scripts are loaded before running your code.

window.addEventListener("load", function() {
  // Code that depends on an external script
});

3. Loading Heavy Resources: If your webpage uses heavy resources (like large images, videos, etc.), and you want to show a loading screen or a progress bar until everything is loaded, you can use the load event.

window.addEventListener("load", function() {
  // Hide loading screen
  document.getElementById('loadingScreen').style.display = 'none';
});

4. Analytics or Tracking Scripts: Sometimes, you want to ensure that tracking scripts (like Google Analytics) only run after the entire page has loaded, to avoid slowing down the rendering of the page.

window.addEventListener("load", function() {
  // Google Analytics tracking code
});

Remember, the load event fires after the entire page and all of its related resources have finished loading. This can be significantly later than the DOMContentLoaded event if there are many or large resources to load.

Kyle Simpson, in his book "You Don't Know JS: Async & Performance", explains the difference as follows:

"The DOMContentLoaded event fires when parsing of the HTML on the page is complete, and all the scripts that need to run immediately but asynchronously have finished. The load event fires when all the assets for the page have been loaded and rendered."

In summary, use DOMContentLoaded if your code needs to run as soon as the DOM is ready, but doesn't depend on stylesheets, images, and subframes. Use load if your code needs these resources to be loaded.