How Browsers Work: A Deep Dive into Rendering, JavaScript Execution

Introduction

Web browsers are essential tools that allow users to access and interact with the internet. They fetch, process, and display web pages efficiently. But have you ever wondered what happens under the hood when you enter a URL and hit enter? In this blog, we’ll explore the step-by-step process of how browsers work, from fetching web content to rendering it on the screen.

1. Fetching the Webpage

DNS Resolution

When you enter a URL (e.g., https://example.com), the browser first needs to find the IP address of the server hosting the website. This is done through the Domain Name System (DNS).

Example:

example.com → 192.168.1.1

Sending an HTTP Request

After obtaining the IP address, the browser sends an HTTP or HTTPS request to the server to retrieve the webpage.

Example HTTP Request:

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Chrome/120.0

Server Response

The server processes the request and sends an HTTP response containing the HTML file, CSS, JavaScript, and other resources.

Example HTTP Response:

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1024

2. Parsing & Building the DOM

What is the DOM (Document Object Model)?

Once the browser receives the HTML file, it starts parsing it and constructing a DOM Tree, which represents the structure of the webpage.

Example HTML:

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

DOM Tree Representation:

Document
├── html
    ├── head
    │   ├── title
    ├── body
        ├── h1
        ├── p

3. Parsing & Building the CSSOM

What is the CSSOM (CSS Object Model)?

CSS is parsed separately to create a CSSOM (CSS Object Model), which helps in styling elements on the webpage.

Example CSS:

h1 {
  color: blue;
  font-size: 24px;
}
p {
  color: gray;
}

CSSOM Tree Representation:

CSSOM
├── h1 { color: blue; font-size: 24px; }
├── p { color: gray; }

4. Creating the Render Tree

The DOM and CSSOM are combined to create a Render Tree, which includes only the elements visible on the page.

Example: Elements with display: none; are excluded from the Render Tree.

5. JavaScript Execution

JavaScript Engine (V8, SpiderMonkey, JavaScriptCore)

Each browser has its own JavaScript engine to execute JavaScript code:

Chrome: V8 Engine
Firefox: SpiderMonkey
Safari: JavaScriptCore

Steps in JavaScript Execution

Parsing: JS code is broken into tokens and transformed into an AST (Abstract Syntax Tree).
Compilation: JS is Just-In-Time (JIT) compiled into machine code.
Execution: The optimized code runs in the JS engine.

Example JavaScript:

document.querySelector("h1").innerText = "Welcome!";

If the JavaScript modifies the DOM, the browser may trigger a Repaint or Reflow.

6. Rendering the Webpage

Steps in Rendering

Layout Calculation: The browser calculates the size and position of each element.
Painting: Elements are drawn as pixels on the screen.
Compositing: The GPU combines different layers for smooth animations.

Reflows & Repaints

Reflow: Happens when the layout changes (e.g., adding/removing elements).
Repaint: Happens when only styles (e.g., color changes) are updated.

Example of a Bad Reflow:

for (let i = 0; i < 1000; i++) {
  document.body.appendChild(document.createElement("div"));
}

Adding too many elements at once forces multiple reflows, slowing down performance.

7. Optimizations in Modern Browsers

Techniques for Better Performance

GPU Acceleration: Used for animations and rendering.
Lazy Loading: Loads images only when needed.
Offscreen Rendering: Renders parts of the page before displaying them.

8. Advanced Concepts

WebAssembly (WASM) – Running C++ in the Browser

WebAssembly (WASM) allows running C, C++, or Rust inside the browser at near-native speed.

Example C++ Code Running in the Browser:

#include <emscripten.h>
extern "C" {
  int add(int a, int b) {
    return a + b;
  }
}

This C++ code can be compiled into WebAssembly and called from JavaScript!

Use Cases of WebAssembly

Games
Video editing
High-performance web applications

9. Summary: How a Browser Loads a Webpage

Fetches HTML, CSS, JS from the server.
Parses HTML → Builds the DOM.
Parses CSS → Builds the CSSOM.
Runs JavaScript → Modifies the DOM.
Merges DOM + CSSOM → Creates Render Tree.
Calculates Layout → Positions elements.
Paints pixels on the screen.
Uses GPU for smooth rendering.

sources:-

MDN Web Docs - https://developer.mozilla.org/
- Covers browser internals, rendering pipeline, and JavaScript execution.
Google Chrome Developers Blog - https://developer.chrome.com/
- Provides insights into V8 JavaScript engine, GPU rendering, and browser optimizations.
High-Performance Browser Networking by Ilya Grigorik
- A deep dive into how browsers fetch and process web resources efficiently.
Web.dev by Google - https://web.dev/
- Best practices for performance optimization, lazy loading, and rendering techniques.

How Browsers Work: A Deep Dive into Rendering Webpages

Table of contents