You might think you already know how a browser works: type a URL, hit enter, the browser makes an HTTP request, the server responds, and the website loads—simple, right?
Not quite! Behind the scenes, your browser is doing far more. It’s performing complex tasks like parsing, tokenizing, interpreting, executing, downloading resources, and assembling them—all in milliseconds—to display a seamless webpage.
Ever wondered how HTML, CSS, and JavaScript are downloaded, processed, and rendered into the websites you see? In this blog, I’ll take you behind the scenes and show you exactly how a browser works its magic
Understand the Browser Structure and Its Components:
This is a hypothetical diagram of a browser where each component serves a different purpose. Here is a small breakdown:
1. User Interface (UI)
What it does: Provides the elements users interact with, like the address bar, back/forward buttons, bookmarks, and the main content display area.
Key role: Enables interaction between the user and the browser.
2. Browser Engine
What it does: Acts as a middle layer between the User Interface and the Render Engine, coordinating what needs to be displayed.
Key role: Translates user actions (e.g., scrolling, navigation) into tasks for the Render Engine.
3. Render Engine
What it does:
- Parses and converts HTML and CSS into the DOM and CSSOM, combines them into a Render Tree, and paints the content on the screen.
Key role: Handles layout, rendering, and displaying the webpage visually.
4. JavaScript Engine
What it does: Executes JavaScript code, enabling dynamic content, DOM manipulation, and event handling.
Key role: Powers interactivity and logic on the webpage.
5. Network
What it does: Manages requests and responses for fetching resources (HTML, CSS, JS, images) over HTTP/HTTPS. It also manages caching mechanisms to avoid redundant network requests for already loaded resources.
Key role: Downloads the resources needed to display the webpage.
6. Web API
What it does: Coordinates asynchronous tasks like setTimeout, setInterval, and scheduled events.
Key role: Works with the JavaScript engine to enable time-based operations.
7. Storage
What it does: Provides local storage options like cookies, localStorage, sessionStorage, and IndexedDB.
Key role: Stores user data, preferences, and cached information for faster and offline browsing.
How Browsers Serve Our Requestes:
Request-response cycle:
First we hit the URL in the browser
Then the browser reads that URL and sends a request to the DNS server. Because the browser doesn’t understand anything except the IP address.
DNS (Domain Name Server) is a kind of server that has records of the domain and its corresponding IP address. It returns the IP address of the requested domain name. DNS has its own mechanisms and components that do this mapping.
The DNS server gives the actual IP associated with that particular domain. This IP address is the place or server where your requested website is hosted or stored publicly.
Using that IP address, the browser creates an HTTP request to that server.
Then the server approves that request and serves it back to your IP address.
Then your browser receives those served files or resources in chunks and loads them into the browser and shows the actual webpage in front of you.
That’s it! No. There is a magical part that happens inside the browser engine. To more explore that, let understand,
How Browsers Render the Webpage to Us:
Now, as you already know, after successfully getting a response, the browser starts loading the resources and paints them inside the rendering engine. But what are those resources?
They are mainly HTML, CSS, JavaScript, and some assets like images, videos, etc.
HTML files are fetched first and get started parsing by browser because its the entry point. It contains references (like
<link>for CSS and<script>for JS) that tell the browser what additional resources are needed. These are the critical resources. Modern browsers prioritize critical resources using resource prioritization techniques like preloading.
1. Parsing
Parsing is an iterative process where the browser converts raw text into tokens and subsequently builds tree structures (like the DOM and CSSOM).
First, the HTML parser starts parsing HTML files when it encounters external resources (CSS, JS, images). It sends requests to fetch them asynchronously while continuing to parse the HTML. If it finds CSS files and then loads them and parses them until that time rendering stops because CSS can change the content. In the case of JavaScript, the pause of parsing and rendering depends on how script files were added to the HTML.
By default, the JS script tag blocks the parsing and rendering until it fully downloads the script files and executes them.
<script type="text/javascript" src="script.js" async>
But if you use defer or async keyword in script tags, then it behaves differently.
Async:
<script type="text/javascript" src="script.js" async>
For async, the parsing of HTML continues while the browser also fetches script files from the server, and after completing the download, the browser executes them right away in the order in which they were encountered. While execution parsing pauses for that time being.
Defer:
<script type="text/javascript" src="script.js" defer>
For defer, the parsing of HTML continues while the browser also fetches script files from the server, and after completing the download and finishing the parsing, the browser executes them right away in the order in which they were encountered.
Here in both cases, parsing of HTML continues, but the main difference is the execution order. The async scripts might execute before HTML parsing completes, depending on the download timing, while defer scripts always wait until the HTML parsing finishes.
2. Tokenization:
Tokenization is the process of breaking down raw text (e.g., HTML, CSS, or JavaScript code) into smaller, meaningful pieces called tokens. It happens while parsing the HTML, CSS, and Javascript. This is the first step in the parsing phase.
For example:
Tokenization in HTML
<div class="box">Hello</div>
is broken into tokens:
Start tag:
<div>Attribute:
class="box"Text node:
HelloEnd tag:
</div>
Tokenization in CSS
In CSS, tokenization converts style rules into tokens like:
Raw CSS:
body { color: red; }Selector:
bodyProperty:
colorValue:
redPunctuation:
{,;,}
Tokenization in JavaScript
JavaScript tokenization is more complex.
Raw JS:
const sum = a + b;const→ keywordsum→ identifier=→ operatora→ identifier+→ operatorb→ identifier;→ delimiter
3. Modeling:
While parsing and after the tokenization are completed, the browser uses those small pieces of tokens to assemble them in a tree structure. This tree contains nodes by merging different object models.
Here HTML tokens create DOM (Document Object Model) trees, CSS creates CSSOM (CSS Object Model), and JavaScript Abstract Syntax Tree (AST), which represents the logical flow of the code to execute the scripts.
4. Layout Calculation
During this phase, the browser determines the exact position, size, and dimensions of every visible node in the Render Tree. It considers styles like width, height, margin, padding, flexbox/grid, and viewport size (responsiveness). This is when calculations for things like percentages, media queries, and viewport adjustments are resolved. Each node is assigned a specific box model position and size on the screen
5. Painting:
The browser takes the information from the layout phase and applies styles (colors, shadows, borders, etc.) to paint pixels on the screen. Thus, we see a complete webpage in the browser window.
Final Words:
Understanding how browsers work under the hood can enhance your perspective as a developer and also helps developers optimize performance and troubleshoot rendering issues more effectively. Whether you're debugging rendering issues or optimizing page load times, knowing what happens behind the scenes will empower you to build smarter and faster web experiences. The next time you hit refresh on your browser, you’ll appreciate the magic and complexity behind what seems so simple.