Understanding the lifecycle of an HTML page is crucial for building efficient and responsive web applications. There are three main events that play a significant role in the lifecycle of an HTML page:
DOMContentLoaded
load
beforeunload/unload
- DOMContentLoaded
The DOMContentLoaded event is fired when the HTML document has been fully loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This event is useful for setting up the initial UI state and interacting with the DOM elements since the DOM tree is now fully constructed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOMContentLoaded</title>
<script>
function domReady(){
const img=document.getElementById("naruto");
alert(`Image width is ${img.offsetWidth} X ${img.offsetHeight}`);
//Try multiple time hard refresh as if the image is cache it will show the actual size of the image else if not cached and you are loading for first time then it will show as 0x0
}
document.addEventListener("DOMContentLoaded",domReady);
// DOMContentLoaded is always happen on document not on window unlike window.load
</script>
</head>
<body>
<main>
<section>
<img src="https://www.cartoonbucket.com/wp-content/uploads/2017/04/Naruto-Angry.png?speed=1&cache=0" alt="naruto" id="naruto">
</section>
</main>
</body>
</html>
If there is more script tag then DOMContentLoaded waits for it to load as the script can be used to modify some elements but if the script is async or defer it doesn't wait for it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.addEventListener("DOMContentLoaded", () => {
alert("DOM ready!");
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>
<script>
alert("Library loaded, inline script executed");
</script>
</head>
<body>
</body>
</html>
2.load
The load event is fired when the whole page, including all dependent resources such as stylesheets and images, has loaded. This is useful for actions that require the entire page to be fully loaded.
3.beforeunload
The beforeunload event is fired when the window, the document, and its resources are about to be unloaded. This event is useful for showing a confirmation dialog before the user leaves the page, which can prevent data loss. The unload event is fired when the page is being unloaded, but it doesn't allow you to cancel the unloading process.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>load & beforeunload</title>
<script>
function domLoaded(){
const img=document.getElementById("naruto");
alert(`Image width is ${img.offsetWidth} X ${img.offsetHeight}`);
}
window.addEventListener("load",domLoaded);
</script>
<script>
window.addEventListener("beforeunload", (event) => {
event.returnValue = "DATA NOT SAVED";
});
/* This will pop up a message "This page is asking you to confirm
that you want to leave — information you’ve entered may not be saved."
But the message will be dependent upon the browser and it can be changed.
*/
</script>
</head>
<body>
<main>
<section>
<img src="https://www.cartoonbucket.com/wp-content/uploads/2017/04/Naruto-Angry.png?speed=1&cache=0" alt="naruto" id="naruto">
</section>
</main>
</body>
</html>
4.unload
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.
For more information on the above topic please go through the below links
Page: DOMContentLoaded, load, beforeunload, unload
Document: DOMContentLoaded event
Window: load event
BeforeUnloadEvent
Feel free to share your thoughts or ask questions in the comments below! Happy coding!
Top comments (1)