Describe the difference between DOMContentLoaded and window.load

WHAT THIS TESTS: This question probes whether you understand the browser's parsing and resource-loading pipeline beyond surface-level definitions. Senior engineers are expected to know exactly when the DOM is safe to query and manipulate versus when every external dependency has arrived, because choosing the wrong milestone directly impacts perceived performance, user interactivity, and Core Web Vitals scores.

A GOOD ANSWER COVERS: First, define DOMContentLoaded as the moment the HTML parser finishes and all deferred scripts have downloaded and executed, noting that it does not wait for stylesheets unless a parser-blocking script is present. Second, define the load event as the point where every image, iframe, stylesheet, and async script has finished loading. Third, explain the performance rationale: attaching click handlers, hydrating components, or reading layout metrics inside DOMContentLoaded lets users interact with the page while heavy assets are still in flight, whereas waiting for load defers all interactivity until the last byte arrives. Fourth, mention the readyState guard for dynamically injected scripts that might run after DOMContentLoaded has already fired.

COMMON WRONG ANSWERS: A red flag is saying the two events are interchangeable or that load is safer for all initialization. Another is claiming DOMContentLoaded waits for images or that stylesheets always block it; the nuance is that stylesheets block parser-blocking scripts, which in turn can delay DOMContentLoaded. A third red flag is recommending async scripts inside the head to speed up DOMContentLoaded without acknowledging that async scripts can still interrupt parsing if they arrive early and execute immediately.

LIKELY FOLLOW-UPS: An interviewer might ask how defer versus async influences these events, or how to measure the gap between DOMContentLoaded and load in the field. They may also ask what happens if a script checks document.readyState after a top-level await in a module, or how server-side hydration and modern frameworks change which event you listen to.

ONE CONCRETE EXAMPLE: Imagine a product listing page with 40 high-resolution images. If you wait for window load to attach the Add to Cart button handlers, users cannot click anything until all 40 images finish downloading, which could take 2 to 5 seconds on 3G. Instead, listen for DOMContentLoaded to bind those handlers and initialize the cart state; the images can continue loading in the background while users already interact with the page.

Source: developer.mozilla.org