The Lifecycle of an HTML Page: Key Events to Know
Tags: webdev, javascript, html, interview
Published: 2024-06-29 03:09:35

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

1. **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.

```html
<!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.

```html
<!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.

```html
<!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](https://javascript.info/onload-ondomcontentloaded)
[Document: DOMContentLoaded event](https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event)
[Window: load event](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event)
[BeforeUnloadEvent](https://developer.mozilla.org/en-US/docs/Web/API/BeforeUnloadEvent)


Feel free to share your thoughts or ask questions in the comments below! Happy coding!