Demystifying Browser Rendering: A Deep Dive into HTML and CSS.
The purpose of writing this article is to explain how the inside of the browser works.
Demystifying Browser Rendering: A Deep Dive into HTML and CSS.
The purpose of writing this article is to explain how the inside of the browser works.
I know that very few people or resources are available on this topic, and I will try to explain it to the best of my knowledge. I would appreciate your feedback, whether it’s related to correcting any mistakes I may have made or anything else.
Ok, let's start 3…2…1…Go 🙂
What is a Web Browser?
A web browser is an application for accessing websites and the internet. For more details, please refer to this link.
The block diagram of a web browser typically consists of the following components:
- User Interface: This component allows users to interact with the browser and navigate websites.
- Rendering Engine: It interprets HTML, CSS, and JavaScript code to display web content correctly.
- Networking: This component handles network requests and responses, allowing the browser to retrieve web resources.
- Browser Engine: It coordinates the different components of the browser and manages their interactions.
- JavaScript Engine: This engine interprets and executes JavaScript code on web pages.
- Data Storage: It includes caches, cookies, and local storage, which store website data to improve performance and user experience.
Block diagram of a web browser.
As we know, data is sent over the internet in packets sized in bytes. So, when we attempt to open an HTML or CSS file, the web browser reads the raw bytes of HTML or CSS. However, it can’t do anything with it, so the raw bytes of data must be converted into something understandable.
Raw Bytes into Character Code.
The browser uses the specified character encoding to decode the raw bytes into characters. This process is known as decoding or character set conversion. UTF-8 is the most common character encoding used on the web because it supports a wide range of characters, including those from different languages and special symbols.
Character to Token
- Further, these characters are parsed into tokens and the process is called tokenization.
- Tokenization is the process of breaking down the characters into meaningful chunks called tokens.
- This token represents the different parts of the HTML parsing such as the start tag, end tag, context and attributes.
- Then, these tokens are converted into the nodes, it is an entity within a document object tree (DOM). The nodes are linked in a tree data structure known as the DOM.
- The DOM (Document Object Model) is the representation of relationship between the parent-child and its adjacent siblings etc.
- Here is the final flow of the browser execute the HTML file.
But, what about the CSS file?
Ok so let us know how the CSS file is executed by the browser.
When the browser receives the raw bytes of the HTML and it request to fetch the ‘styles.css’ stylesheet linked.
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8"> <meta name=”viewport” content=”width=device-width, initial-scale=1.0"> <title>Chat Interface</title> <link rel=”stylesheet” href=”styles.css”></link> </head> <body>
<script type=”text/javascript” src=”index.js”></script> </body> </html>
From raw bytes to CSSOM
- A similar process is initiated as same as the raw bytes of HTML, it happens parallel for both HTML and CSS.
- The raw bytes are converted into characters, and then tokenized.
- Nodes are formed and finally form a tree structure. But for HTML something called DOM (Document Object Model) similarly, for CSS it is called CSSOM (CSS Object Model).
- The CSSOM tree tells us how the different elements should look when rendered. The tree structure allows the browser to start with the most general rule and refine the computed styles by going down the tree to more specific rules. The tree uses the cascading principle, combining inheritance and specificity to compute the styles for the different objects on the page.
The Render Tree
The render tree is a data structure which is responsible for rendering the web pages. It is the combination of DOM and CSSOM. It includes only the elements that are going to be rendered on the page, taking into account styles and layout information.
Layout
Once the render tree is formed, the browser performs layout or reflow, determining the position and size of each render tree node based on its styling and the available space.
Paint
This step is called painting, rasterizing, or repainting. Finally, now the browser knows which node to show or hide with all the CSS properties, so it will paint the pixels on the screen according to the information from the layout.
But, wait what about the JS file? 🤔🤔🤔…
So, we will look about the js file and how it renders and more about the <script /> tag with its attributes async and defer and all the cases in my next article.
Thank you for reaching out till here and would love to know your feedback. Please comment your suggestion so that I can improve it in my next article.
Bishal kumar Saha.
메타데이터
- post_id
- c944a4503c09
- slug
- demystifying-browser-rendering-a-deep-dive-into-html-and-css-c944a4503c09
- url
- https://medium.com/@kbishal922/demystifying-browser-rendering-a-deep-dive-into-html-and-css-c944a4503c09
- canonical_url
- https://medium.com/@kbishal922/demystifying-browser-rendering-a-deep-dive-into-html-and-css-c944a4503c09
- author_url
- https://medium.com/@kbishal922
- status
- ok
- fetched_at
- 2026-07-08 20:12:56
