DOMContentLoaded

`DOMContentLoaded` fires when the browser has finished parsing the HTML document and built the DOM, without waiting for images and most other external resources to finish loading. It is useful when JavaScript needs to safely access DOM elements as soon as the document structure is ready.

The browser parses the HTML and creates the document's DOM tree. When parsing is complete, the browser dispatches the `DOMContentLoaded` event on the `document` object.

Unlike the `load` event, `DOMContentLoaded` does not generally wait for images, subframes, and other external resources to finish loading. This makes it useful for initialization work that depends on the DOM rather than on every page resource being available.

Classic scripts encountered during HTML parsing can delay when parsing completes. Stylesheets can also affect when scripts execute, so the exact timing depends on what the document contains. Deferred scripts execute after parsing and before `DOMContentLoaded` is fired.

If a script is loaded with `async`, it can execute independently of document parsing, so code that relies on `DOMContentLoaded` should account for whether the event may already have fired. A common pattern is to check `document.readyState` before registering initialization logic when code can run at an uncertain time.

Key points

• `DOMContentLoaded` fires after HTML parsing finishes.
• It does not generally wait for images and similar page resources.
• The event is dispatched on `document`.
• Deferred scripts run before `DOMContentLoaded` fires.
• `load` is later and waits for the page's required resources.

Interview questions

Why might `DOMContentLoaded` fire later than expected?

HTML parsing can be delayed by parser-blocking scripts. Deferred scripts also execute before `DOMContentLoaded`, so slow deferred scripts can postpone the event. Stylesheet and script interactions can further affect when parsing and script execution complete.

What is `DOMContentLoaded`?

It is a browser event fired on `document` after the HTML has been parsed and the DOM has been constructed. It lets JavaScript initialize DOM-dependent behavior without waiting for every page resource to finish loading. For example, event handlers can be attached once the required elements exist.

Does `DOMContentLoaded` wait for images to load?

No, it does not generally wait for images to finish loading. The event is concerned primarily with the document's parsed structure and the relevant script execution ordering. If code needs an image's final loaded state, an image load event or another appropriate mechanism may be needed.

What is the difference between `DOMContentLoaded` and `load`?

`DOMContentLoaded` fires after the HTML document has been parsed and the relevant deferred script execution has completed. `load` fires later, after the document and its dependent resources such as images have loaded. Therefore, DOM initialization often belongs at `DOMContentLoaded`, while logic requiring fully loaded resources may need `load`.

How can code safely initialize when it may execute before or after `DOMContentLoaded`?

If execution timing is uncertain, code can inspect `document.readyState`. If the document is still loading, it can register a `DOMContentLoaded` listener; otherwise it can initialize immediately. This avoids depending on an event listener that might have been registered after the event already occurred.