DEV Community

Cover image for The Lifecycle of an HTML Page: Key Events to Know
Raju Saha
Raju Saha

Posted on • Edited on

1

The Lifecycle of an HTML Page: Key Events to Know

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
Enter fullscreen mode Exit fullscreen mode
  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.

<!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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!

SurveyJS custom survey software

JavaScript UI Library for Surveys and Forms

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

View demo

Top comments (1)

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay