Page: DOMContentLoaded, load, beforeunload, unload

https://javascript.info/onload-ondomcontentloaded

The lifecycle of an HTML page has three important events:

• DOMContentLoaded – the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures <img> and stylesheets may be not yet loaded.
• load – not only HTML is loaded, but also all the external resources: images, styles etc.
• beforeunload/unload – the user is leaving the page.

DOMContentLoaded and scripts

When the browser processes an HTML-document and comes across a <script> tag, it needs to execute before continuing building the DOM. That’s a precaution, as scripts may want to modify DOM, and even document.write into it, so DOMContentLoaded has to wait.
So DOMContentLoaded definitely happens after such scripts:

Scripts that don’t block DOMContentLoaded
There are two exceptions from this rule:

1. Scripts with the async attribute, that we’ll cover a bit later, don’t block DOMContentLoaded.
2. Scripts that are generated dynamically with document.createElement('script') and then added to the webpage also don’t block this event.

DOMContentLoaded and styles

External style sheets don’t affect DOM, so DOMContentLoaded does not wait for them.
But there’s a pitfall. If we have a script after the style, then that script must wait until the stylesheet loads:

<link type="text/css" rel="stylesheet" href="style.css">
<script>
  // the script doesn't not execute until the stylesheet is loaded
  alert(getComputedStyle(document.body).marginTop);
</script>

The reason for this is that the script may want to get coordinates and other style-dependent properties of elements, like in the example above. Naturally, it has to wait for styles to load.
As DOMContentLoaded waits for scripts, it now waits for styles before them as well.

window.onload

The load event on the window object triggers when the whole page is loaded including styles, images and other resources.
The example below correctly shows image sizes, because window.onload waits for all images:

Summary

Page load events:

• TheDOMContentLoadedevent triggers ondocumentwhen the DOM is ready. We can apply JavaScript to elements at this stage.
  • Script such as <script>...</script> or <script src="..."></script> block DOMContentLoaded, the browser waits for them to execute.
  • Images and other resources may also still continue loading.
• The load event on window triggers when the page and all resources are loaded. We rarely use it, because there’s usually no need to wait for so long.
• The beforeunload event on window triggers when the user wants to leave the page. If we cancel the event, browser asks whether the user really wants to leave (e.g we have unsaved changes).
• The unload event on window triggers when the user is finally leaving, in the handler we can only do simple things that do not involve delays or asking a user. Because of that limitation, it’s rarely used. We can send out a network request with navigator.sendBeacon.
• document.readyStateis the current state of the document, changes can be tracked in thereadystatechangeevent:
  • loading – the document is loading.
  • interactive – the document is parsed, happens at about the same time as DOMContentLoaded, but before it.
  • complete – the document and resources are loaded, happens at about the same time as window.onload, but before it.