Explain the process of document loading

Last Updated : 07 Feb, 2023

In this article, you will understand the flow in which the HTML document loads whenever a web client ( Browser ) makes a request. This process involves three important objects, which are:

Client: This makes a request for the document. It is basically the Web browser
Server: That serves the Document to the client
HTTP Protocol: The communication standard for Web

document loading is the process in which the content from the server is taken to the client and depicted to the users. Loading takes place through a series of events which is explained with an example below.

Let’s say you are making a request to an example domain like www.example.com, The following events happen in the loading of the document:

The client makes a request to the server with the hosting for www.example.com
The server responds with the default web page (Ex: index.html)
The Client receives the HTML document through the HTTP protocol
The Client contains an HTML parser, Which is an algorithm that parses the HTML code
The HTML parser converts the HTML document received from the server into a Tree called a Document Object Model (DOM Tree)
The client also makes the request to the URL present within the document like hyperlinks, stylesheets, or JS scripts, and the other resources are loaded also.
The client contains a rendering engine that displays the final HTML DOM.

Workflow of Document Loading in 4 Simple Steps

Syntax:

<html>
    <head>
        <title>Sample</title>
        <link href="style.css"></link>
    </head>
    <body>...</body>
    <script src="script.js"></script>
</html>

Consider the syntax, when the client gets a file containing the code it initially parses the code starting from the <html> tag and simultaneously starts creating the nodes for the tree, then it encounters the stylesheet link with the name style.css, it makes a request to the server for the CSS file and the CSS file gets downloaded and forms a tree especially for the CSS called as CSSOM, then the process continues with the further tags in the HTML file, ultimately it downloads the script.js file and forwards it to the JS engine.

Events during the document loading process:

Some events in javascript represent the loading of the document with the help of which we can take actions in the script while the document is loading. There are 4 important events in the document lifecycle which can be accessed with Javascript :

load event: When all the resources are loaded
domcontentloaded event: When the DOM tree is built and ready to create the interface
unload: When the document unloads
beforeunload: Same as unload but it confirms once from the user before unloading

Additionally, to know the state of the document, you can refer to the document.readyState property that contains 3 possible values:

loading: The document is loading
interactive: The document was read to display
complete: The document was complete and all other resources are loaded

The below two examples demonstrate the above-mentioned events

Example 1: In this, we will analyze the working of all the above events and the sequence in which they execute. The document makes a call to the bootstrap stylesheet and the script. The Gif output shows the waterfall timeline of the loading using the chrome browser.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Bootstrap CDN -->
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
        integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h3>Explain the process of document loading.</h3> 
  
    <script> 
        window.onload = () => { 
            console.log("Load Event...") 
        } 
        document.addEventListener("DOMContentLoaded", () => { 
            console.log("DomContentLoaded Event...") 
        }); 
        window.onbeforeunload = () => { 
            console.log("BeforeUnload Event...") 
            return false; 
        } 
        window.onunload = () => { 
            console.log("Unload Event...") 
        } 
    </script> 
</body> 
  
</html>

Output: Here the output shows the domcontentloaded triggers before the load event. The beforeunload confirms the user and the unload is triggered ultimately and erased instantly as the page reloads when you press ctrl + R.

Example 2: In this, we will look at the readyState property. It prints the different values of the document.readyState depending upon the state of the document.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>process of document loading</title> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h3>Explain the process of document loading.</h3> 
    <script> 
  
        document.addEventListener("readystatechange", () => { 
            console.log(document.readyState); 
        }); 
  
    </script> 
</body> 
  
</html>