How the Web Browser Renders the Pages with DOM CSSOM?

How Web Browser works?

A web browser acts like software that can be used to access the internet. The main function of the browser is to locate, retrieve and display the required information. A web browser consists of various structured bundles of code that are required to perform certain tasks to retrieve HTML, CSS and javascript of a web page to the end-user. Based on their task these structure bundle of code are defined as various components of the browser, which are as follow:-

The user interface
The Browser Engine
The Rendering Engine
Networking
Javascript Interpreter
UI Backend
Data Persistence

The process of creating products that provide meaningful and relevant experiences to users and enhancing user satisfaction/ experience. Click to explore about, What is User Experience Design?

What are the Key Components of Browser?

The User Interface: The user interface is referred to as a space where a user can have to interact with the browser, The user interface consists of various numbers of elements and buttons, such as address bar, next and back button, refresh, stop and bookmark option etc. which helps in making the user interaction with the browser more interactive.
The Browser Engine: The browser engine behaves like a bridge between the user interface and the rendering engine.
The Rendering Engine: It’s the responsibility of the rendering engine to display the content which is requested by the end-user.
Networking: This component of the browser is responsible for retrieving the URLs, with the help of internet protocols. It handles the area of internet communication and security.
Javascript Interpreter: Javascript interpreter is solely responsible for interpreting and executing the javascript code. The final result which is received after the interpretation of the javascript code is then sent to the rendering engine.
UI Backend: UI backend is responsible for drawing various widgets like select box, input box, check box etc.
Data Persistence: It acts as a database on the local drive of the user's computer. It helps in managing the user data like cache, cookies, bookmarks, preferences etc.

A tool that enables end users, administrators and organizations to gauge and evaluate the performance of a given system. Click to explore about, Performance Monitoring Tools

What is Browser Engine?

The main 2 components of the browser engine which are responsible for the rendering of the web page are:-

Browser Engine
Rendering Engine

Browser Engine

Browser engines are also referred to as the javascript engine of the web browser, different web browsers use different javascript engines like google’s javascript engine name is V8 similarly Firefox has spider monkey, Safari has nitro and edge has Chakra. The key objective of the browser engine is to marshall's actions between the UI interface and the rendering engine.

Rendering Engine

The work of the rendering engine starts once the user has requested a particular web page. The rendering engine starts receiving the Html, CSS and js files of the requested web page, through the networking layer. After receiving the content of the requested page, the following flow of the rendering engine begins:-

The requested HTML and CSS files of the requested page are parsed in chunks. Dom nodes are created to form the Dom tree and CSSOM tree.
The render tree is constructed by combining the Dom and CSSOM tree. The render tree contains both information about the order of the elements and their styling information. The render tree ensures that the content is displayed in the expected format.
At this stage, every node is assigned with dedicated coordinates. To ensure that every element appears in the same position on the screen, this process is called the rendering process.
In this stage, the render tree is traversed and every node as mentioned in the tree is painted on the screen.

CX and UX are separate and unique. Both play an essential role in the overall success of a program, the reputation of your brand, and customers' loyalty to your brand. Click to explore about, Customer Experience vs User Experience

Difference between rendering and browser engine?

The main difference between rendering and a browser relies on their area of operations. When the user requests for a web page, the browser engine sends the request to the rendering engine which calls further to the networking component of the browser, the networking component then provides desired HTML, CSS and js files to the rendering engine. The rendering engine then converts the files in a certain format that is understandable to the browser engine and forwards the interpreted code. The browser engine then takes the interpreted code and further displays it to the end-user.

The rendering engine interprets the received code to the understandable code to the browser, the browser engine acts as an interface between the user and the rendering engine that helps to deliver the result to the user after receiving interpreted code from the rendering process.

What is the Rendering Process for Web Pages?

The rendering process is defined below in various steps:

DOM Tree

A javascript object node is created whenever the rendering engine receives HTML elements like body, div etc. After the creation of a node, a tree-like structure is created with the help of these nodes. As we know, that HTML elements are nested inside one another, the render engine replicates this nested structure with the help of nodes in the dom tree. This helps in increasing the productivity of the browser to manage the webpage efficiently.

A Dom tree consists of a topmost element and has branches attached as per the occurrence of nesting in the HTML document.

An interface design that allows users to interact with either real humans or bots using text and voice/speech through the web, mobile and desktop applications. Click to explore about, Conversational User Interface

CSS Object Model (CSSOM)

CSSOM stands for CSS object model. when the rendering engine is constructing the dom from the HTML file it encounters a link tag referring to the CSS stylesheet, Once the construction of the Dom tree is completed, CSS is mentioned in all the sources i.e external, inline,user-agent etc. is read by the engine.

Each node in the custom tree refers to a style element that is applied to a dom element. A browser also contains its user agent stylesheet, whenever CSS object model is created, first CSS properties for dom element is created by overriding its user agent stylesheet, If the CSS property of an HTML element is not defined in both the stylesheet of the developer and browser, then it inherits the property of its parent element.

Render Tree

The final render is constructed by merging both the DOM and CSSOM tree. Render tree contains all the information of the visible content including their CSS style information. The render tree does not include script, meta tags etc. as they are not included in the render output. The dom elements which are hidden through the CSS property are also excluded from the render tree, such as elements with display: none property. But the elements with property visibility: none or opacity:0 will be added on the render tree and will also take space on the screen. For every node, a matching custom property is applied. The final render tree has then proceeded to the layout stage.

Layout

At this stage, the nodes present in the render tree are assigned with their width, height and x - y coordinates on the respective page. The browser determines the size and the location of each node by traversing the render tree from the root element of the render tree to the last node.

The first calculation of the size, position, width and height of nodes is referred to as layout. The recalculation of the node sizes and location are called reflow. When only a particular part of the screen needs to change, due to any reason either due to the change in the position of the node or due to the stylistic change, such changes happen in the background that do not affect the size and position of the nodes, these changes are called repaint.

Layout Thrashing

Layout thrashing is a process where browsers reflow or repaint the web page numerous times before the page is being loaded. Whenever the web page is refreshed the related page elements like size, shape, placement is overridden by previous layout events. The layout thrashing is heavily affected by the dom, cssom and render tree.

Layout cost is the calculation of the computation needed by the web browser to shape, position and paint the nodes of the rendering tree. Layout cost is dependent on the factors like the number of web page elements are present for the layout and the complexity of the layout process, the complexity of the layout process is determined by the following factors:-

Frequent use of flexbox property.
Presence of animation on-page.
By not restyling a huge part of the dom for small changes in the element.

A tool that is especially valuable for assisting in the design of particular mental, physical and professional training programs. Click to explore about, Performance Profiling Tools and Benefits

Paint

At this stage, the browser converts the calculation done in the layout phase into the actual pixels on the screen. At the painting stage, the elements are filled pixel by pixel on the screen.And this filling of colors is done on numerous surfaces called layers.

Layout tree and layer tree are combined together to make paint records of how the elements will be painted on the screen in different layers

Painting of the elements can be done in 2 ways:-

Global:- In the global method the entire tree is painted at once.
Incremental Order:- In this method, only those regions are painted, that does not affect the rest of the tree.

When only a certain region needs to be repainted, then the incremental order is used for the paint, a rectangle is initialized around the region which is to be changed, by this the browser can easily identify the the region where the repaint is required and that region is repainted without disturbing the rest of the tree.

Composition

In the composition step, the layers created in paint step on which the elements are painted, are combined together to display the final result on the screen.The advantage of painting elements in different layers is that the elements are repainted on regular basis, and such kind of changes can be easily implemented without disturbing other elements, as the all exist on different layer.

As shown in the image , different layers have different elements painted on it,to view the final result on the screen these layers need to be combined together as per the position of the elements in the render tree.The layers need to be positioned in an appropriate order to avoid overlapping of elements.

Our solutions cater to diverse industries with a focus on serving ever-changing marketing needs. Click here for our Product Design and User Experience Solutions

Conclusion

The rendering process explains how the code we write is finally displayed on the screen by the browser. The prior knowledge can help the developers to write more optimized code for a better-performing web page.