Understanding DOM
Every web page handles user interaction to do its magic with the help of Javascript. But what happens behind the screen?
Front-end development is all about effective HTML rendering and DOM manipulation by handling events. You might have heard the term “DOM” a lot. You might know a lot about manipulating the DOM using Javascript.
What does the browser do behind the screen to handle DOM manipulations?
In my post last week, I mentioned that we would discuss “Virtual DOM” in this week’s post. I realized understanding how DOM works might be essential to understand the ways to optimize it.
In this week’s post, we’ll cover the following concepts:
What is DOM?
The document object
Intro to DOM manipulation using Javascript
Steps taking by browser for re-rendering
What is DOM?
DOM stands for “Document Object Model”. It is a data representation of the elements in a web page.
Document Object Model (DOM) is the programming interface for web pages. DOM allows programs to access and modify the document structure, layout, and content of web pages.
Users see and interact with the HTML elements in all web pages. These elements are represented as components displayed in the browser or their corresponding HTML source code.
DOM is an object-oriented representation of the web page that allows scripting languages like Javascript to make changes to it.
Representation of DOM
Let us take a simple HTML page and see its corresponding DOM representation.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Manipulation</title>
</head>
<body>
<h1>This is a heading</h1>
<p style="color: blue;">
This is a paragraph with blue text
</p>
</body>
</html>
The above code has basic HTML elements like heading and paragraph. Its corresponding DOM representation is shown below.
DOM is represented in a tree structure, and each element in the HTML page is represented as a node.
Each node has its attributes, text content, and a nested node.
When there are HTML elements rendered as children, then the DOM has them as the child nodes of the parent element.
The browser lets Javascript access this tree and its nodes to interact with the HTML page. After changing the properties of the tree, the browser re-renders the HTML page with the updated changes.
The Document object
The DOM structure has its root as “Document”. That is the root of the DOM for any web page.
The Document object is an interface with many methods and properties used to access and manipulate the DOM.
You can see the document object and its properties in your browser.
Open any web page and open the developer console under Browser options » Developer tools » Console tab.
Type in “console.dir(document);” and hit Enter.
This will print the document object. (Refer to screenshot)
Document object printed in console.
Javascript uses the methods and properties of the document object to access the DOM and make changes.
The code below will access the paragraph element of the HTML and change its color to “red”.
document.getElementsByTagName("p")[0].style.color = "red";Let’s break it down.
“getElementsByTagName” is a method inside the document object which is used to get a collection of all elements from the DOM with that tag name.
We are taking the first element with the tag “p”.
We access the style attribute of that tag using the “style” property.
We set the color property to “red”.
This will make the necessary changes to the DOM, and the browser renders the HTML page again with the updated changes.
To learn more about DOM manipulation using Javascript refer this great blog written by Timothy:
https://timothyrobards.medium.com/javascript-fundamentals-master-the-dom-part-1-82433084fb40
Process of rendering a web page
We talked a lot about how the browser understands the changes done to the DOM by Javascript and re-renders the HTML document.
Let us see the steps taken by the browser to make that happen.
1) Javascript
This step is when the browser is notified of the changes done to the DOM by Javascript.
Changes to the DOM can be triggered by event handlers, or altering the properties of the DOM elements. Not only the changes from Javascript but also the changes due to CSS transitions and animations will notify the browser to handle the render.
2) Style calculations
The browser then evaluates the changes required to update the existing HTML page.
After evaluating the style changes, the style attributes for each HTML element is calculated with the new changes.
3) Layout
Changes to the position of HTML elements and addition or deletion of HTML elements is handled in this stage.
These changes will require reconstruction of the HTML page with the updated layout for each element. Finally, the finished layout with the updated changes is calculated.
4) Paint
The paint stage is when the browser starts filling the pixel with the updated DOM. This includes text, colors, vectors, shadows, etc.
Painting stage is done onto multiple surfaces called layers.
5) Compositing
Since the painting phase includes multiple layers, the browser has to render the entire page in correct order according to the layout.
Mistakes in this order might cause broken user interface especially in overlapping HTML elements.
Browser’s render optimization
Imagine the above render process happening for every update done to the DOM. The browser will be doing a lot of work resulting in slowness of the web page.
The browser tries to optimize this process by skipping unnecessary phases in the render process.
DOM changes are in “paint-only” properties → browser skips the Layout phase.
DOM changes are in properties that require neither paint nor layout → browser skips Paint and Layout phases of the render process.
The browser takes these steps to optimize web page renders as much as possible to make it faster.
Why is ReactJS faster?
If the browser is optimizing the render performance of web pages, then why do we need a frontend framework to improve speed?
What does ReactJS bring that will make this process faster?
The more HTML components you have, the more expensive each DOM update becomes. This is because each DOM update will trigger the browser’s render process.
ReactJS incorporates a concept called Virtual DOM, which is proven to significantly improve the performance of a web page, especially with numerous UI components.
Next week we’ll dive deep into the concept of Virtual DOM and how ReactJS leverages this to be the most used frontend framework by developers.
Until next time!
Useful resources:
Browser rendering performance: https://web.dev/rendering-performance/
Introduction to DOM: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
Timothy Robards’ blog on DOM manipulation: https://timothyrobards.medium.com/javascript-fundamentals-master-the-dom-part-1-82433084fb40