What is the DOM & How Does HTML Rendering Happen in Browsers?

#javascript #dom #html #webdev

DOM is a W3C (World Wide Web Consortium) standard. It is a platform and language independent interface standard that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

When a web page loads, the browser builds the page’s DOM tree. In this way, we can change all HTML properties on the page, remove existing HTML elements and attributes, add new HTML elements and attributes, or change all CSS styles on the page with scripting languages such as JavaScript.

What is the DOM Tree?

A DOM tree is a type of tree whose nodes represent the content of the HTML and XML document. Every HTML or XML document has a unique DOM tree representation. For example, let’s examine the following code:

<html>
<head>
  <title>My document</title>
</head>
<body>
  <h1>Header</h1>
  <p>Paragraph</p>
</body>
</html>

The DOM tree of the above code block is as follows:

How the Browser Renders HTML?

A web browser is a piece of software that downloads files from a remote server and displays them to you, allowing user interaction. The process of compiling the files downloaded from a remote server and showing them to the user is done by browser engines. If you are interested, you can examine different browser engines and comparisons.

Data is sent over the Internet as byte packets. The browser must convert these data bytes into a form it understands. Firstly, bytes are converted to HTML characters and then to Tokens. In the next step, Tokens are converted into nodes. Nodes are different objects with certain properties. After the nodes are created, the DOM tree is created.

While creating the DOM tree, the “document” node is created first. Document is a node that represents the entire HTML document. The node that specifies an HTML tag is called “elements”. We can learn the type of any node in the DOM tree with “nodeType”. The NodeType property returns a number. You can review the relevant document to find out which node type this number represents.

The DOM tree has been successfully created, but the browser needs information on how the elements will appear in order to render the page. It is the CSSOM’s responsibility to know how the elements of a page should appear.

What is the CSSOM?

While creating the DOM tree, a request is sent to the CSS link in the

and the CSS styles are returned as a result of this request. As with HTML tags, CSS information comes in bytes, and the CSS Object Model (CSSOM) is created by going through certain stages.

CSS bytes are converted to characters, then tokens and nodes; Finally, a tree structure known as the CSS Object Model or CSSOM for short, is created.

What is the Render Tree?

DOM and CSSOM tree structures are two independent structures. The DOM contains all the information about the relationships of the HTML element of the page, while the CSSOM contains the information about how to style the elements.

The Render Tree contains information about all visible DOM content on the page and all necessary CSSOM information for the different nodes. If an element is hidden by CSS (for example, display: none), it means that the node will not be represented in the Render Tree.

The hidden element (for example, display: none) is present in the DOM, but not in the Render Tree. This is because the Render Tree combines information from both the DOM and the CSSOM.

When the browser renders a Render Tree, it first renders each visible node, starting from the root of the DOM tree (Tags such as script, meta are not included in the Render Tree, and the nodes hidden by CSS are not included in the Render Tree).

visibility: hidden and **display: none **are different. The first makes the item invisible, but the item is contained in the Render Tree (as an empty node), whereas the second (display: none) removes the item from the Render Tree.

Layout and Paint Steps

We have all the content and style information that will be displayed on the screen with the Render Tree, but the image has not yet appeared on the screen. Firstly, the browser has to calculate the exact size and position of each object on the page.

To determine the exact size and position of each object, the browser starts at the root of the Render Tree and calculates each object on the page. As a result of this calculation, the exact location and size of each element is determined. In the next step, the browser paints the nodes one by one on the screen.

Resources Blocking Rendering

DOM and CSSOM must be created before painting. Getting the HTML and CSS to the client as soon as possible is important for optimizing the time to first rendering of web applications.

Even a simple web page is likely to have used JS. When the browser encounters a script tag while reading scripts, the DOM rendering process is paused and stopped until the script file has finished executing. This is because JavaScript can modify both the DOM and the CSSOM. Because the browser isn’t sure what the JavaScript will do, it takes precautions by completely stopping the entire DOM structure.

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Örnek</title>
    <link rel="stylesheet" href="style.css">
    **<script src="app.js"></script>**
</head>

<body>
  .....
</body>

</html>

In the above code example, when the browser comes to the script tag, the DOM rendering process will be stopped until the script file is finished executing. As a different scenario, if the app.js file was being pulled from a server rather than locally, and it was taking seconds to fetch app.js due to network connection, the DOM construction process would also be stopped for the same time.

Let’s continue with a different scenario, for example, when the browser encounters a script tag, if the CSSOM is not ready yet, the JS execution will wait until the CSSOM is ready.

By default the DOM construction process will be stopped whenever the browser encounters a script tag. If you add the “async” keyword to your script tag, the DOM rendering will not be stopped and will be executed when the script file is downloaded and ready.

<!DOCTYPE html>

<html>

<head>

 <meta name=”viewport” content=”width=device-width,initial-scale=1">

 <title>Örnek</title>

 <link rel=”stylesheet” href=”style.css”>

 <script src=”https://random-app.js" async></script>

</head>

<body>

 ....

</body>

</html>

References:

Top comments (4)

John Peters • Mar 5 '23 • Edited

Nice article. I found in my exploration of creating custom elements that my concepts of how the rendering cycle works were totally wrong. The most surprising was how and when child elements get rendered.

The other surprising area was attaching the shadow Dom to render custom elements. But really it shouldn't have been surprising except for the lack of implementation knowledge for different browsers isn't published. Sure we can read the specs but the implementation is not the same thing.

Seems like we are always learning about things and how they work. It's what separates the novice from the pro.