Page: DOMContentLoaded, load, beforeunload, unload
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 not yet have loaded.load– not only HTML is loaded, but also all the external resources: images, styles etc.beforeunload/unload– the user is leaving the page.
Each event may be useful:
DOMContentLoadedevent – DOM is ready, so the handler can lookup DOM nodes, initialize the interface.loadevent – external resources are loaded, so styles are applied, image sizes are known etc.beforeunloadevent – the user is leaving: we can check if the user saved the changes and ask them whether they really want to leave.unload– the user almost left, but we still can initiate some operations, such as sending out statistics.
Let’s explore the details of these events.