How Browsers Work: A Beginner’s Guide
Introduction
Every day, we visit many websites. A browser is the gateway to the internet, allowing us to access websites and information from around the globe. We enter a website like youtube.com and the website appears instantly.
Our browser does many things behind the scenes to render these websites.. In this article we will learn an overview of how browsers actually works, what are the internal workings of a browser.
Let’s get into the working of browsers.
Browser Overview
When you enter a website URL in the address bar, for the first time the browser will send the request to a DNS (Domain Name Server) to get the IP address of the website.
Using the IP address, the browser establishes a connection with the server to exchange data securely.
The network layer then sends the requests to server to share the resources of the webpage. Server verifies the request and on verification it send the requested data.(HTML, CSS, Javascript, etc)
On receving the data browser then renders the webpage.
The process of converting a domain name (
google.com) into its corresponding IP address is known as DNS Resolution.
Want to learn more about the DNS Resolution, you can read a article Here
Main Parts of a Browser (high-level infrastructure)
User Interface
Browser Engine
Rendering Engine
Network Layer
Javascript Engine
UI Backend
Data Storage Layer
High-level architecture of a web browser showing the seven main components and how they interact with each other.
Let's talk about each parts in detail:
User Interface
In a browser, the UI (User Interface) is simply everything you can see and interact which cannot be manipulated. Like:
Address bar
Refresh button
Extensions icon
Download bar
Bookmark bar You cannot control this via HTML, CSS because of the security reasons.
Key components of the browser User Interface that users interact with daily.
Browser Engine
The Browser Engine acts as the coordinator between different parts of the browser. It manages the relationship between the User Interface (address bar, refresh button), the Rendering Engine, and the Data Storage (cookies, cache). It main job is to co-ordinate actions and managing data. For example, if you click the Back button, the browser engine tells the Rendering Engine to dump the current pages and render to the previous page.
Common Browser Engines
| Browser | Browser Engine |
| Firefox | Gecko |
| Chrome | Blink |
| Safari | Webkit |
Network layer
When the browser receives a web URL from the address bar, it will check if the requested data address is already there in the DNS cache, if not Network layer establishes the connection with DNS and request the IP of the server. Using the IP address, the network layer establishes a TCP connection with the server. If the TCP connection is established over HTTPS, a TLS/SSL handshake happens to create a secure, encrypted connection. Once the connection is secure, the browser sends an HTTP GET request to fetch the webpage. The server responds with HTML content and headers, which are passed to the browser for rendering.
Rendering Engine
When the server sends the data it will now be processed by Rendering Engine and is displayed on the screen. The browser uses the render engine to process this data and display on the screen. Basically it converts HTML,CSS and related resources into pixels on your screen.
How Browsers Render a Web Page
Once the browser downloads HTML and CSS, the rendering engine turns that code into a visible webpage that we see.
First, the browser parses the HTML to build a DOM (Document Object Model), which represents the structure of the page. At the same time the rendering engine also parses CSS to create the CSSOM, which contains the styling rules like colors, fonts, and layout.
Next, the browser then combines the DOM and CSSOM to form the Render Tree. This is tree only include the visible elements on the page. Elements with display: none;are excluded.
Now using the Render Tree, the browser calculates the Layout, determing the size and position of each elements. Finally it paints pixels on the screen to display the final page.
This process happens progressively. The browser doesn’t wait for the entire page to download—it starts rendering as soon as enough data is available, which is why content appears gradually while a page loads.
The browser rendering pipeline - from parsing HTML and CSS to painting pixels on the screen.
Parsing HTML and CSS
When a browser receives an HTML document, it first needs to understand its structure. To do this, the browser uses an HTML parser. The parser reads the HTML code and breaks it into small pieces called tokens. These tokens are then used to build the DOM (Document Object Model).
The DOM is a tree-like structure where each HTML element becomes a node. Every node stores important information about the element, such as its content and attributes (like class or id). This tree helps the browser understand how elements are arranged on the page.
Next, the browser processes the CSS using a CSS parser. Just like HTML, the CSS is broken into tokens and then converted into another tree called the CSSOM (CSS Object Model). The CSSOM stores all the style information, such as colors, fonts, and layout rules, for the page.
Although the DOM and CSSOM look similar because both are tree structures, they are created using different internal algorithms and serve different purposes. The DOM represents the page structure, while the CSSOM represents the styles that should be applied to that structure.\
How HTML markup is parsed and converted into a Document Object Model (DOM) tree structure.
CSS parsing in action - how style rules are converted into the CSS Object Model (CSSOM).
Javascript Engine
The Javascript Engine is the part of the browser that executes JavaScript code and make web pages interactive.
What does the JavaScript engine do?
When a webpage includes JavaScript, the engine:
Reads JavaScript code
Parses it and converts it into executable instructions
Executes the code line by line
Manages memory (creation and cleanup of objects)
Handles function calls, errors, and execution order
This is what enables
Button clicks
Form validation
Animations
API calls
Dynamic content updates
Popular JavaScript Engines
| Browser | Javascript Engine |
| Firefox | SpiderMonkey |
| Chrome | V8 |
| Safari | JavascriptCore |
UI Backend
The UI backend is the part of the browser that talks to the operating system to actually draw things on the screen. It is a bridge between the browser and the operating system screen.
After the rendering engine decides what to draw, the UI backend handles how it’s drawn on your device.
Data Storage Layer
It is the part of the browser responsible for storing data locally on the user's devices so websites can remember information across page loads or visits.
What does the data storage layer store?
Cookies – small pieces of data sent with requests
Local Storage – key-value data that persists
Session Storage – data valid for one tab/session
IndexedDB – large, structured data (databases)
Cache Storage – saved network responses for faster loading
Why we need data storage layer?
Without a data storage layer:
Imagine every time you refresh a website you have logged out
Your Preferences like themes, languages
Offline apps won't work Without a data storage layer, modern web experiences like login sessions, preferences, and offline access would not be possible.
