How the Browser Works

A modern web browser is a complex software application that fetches, parses, renders, and displays web content. Understanding its internals helps developers build faster, more reliable, and more accessible web experiences.

The Main Components

A browser is composed of several key layers: the User Interface (address bar, tabs, buttons), the Browser Engine (coordinates between UI and rendering), the Rendering Engine (interprets HTML and CSS), the Networking layer (handles HTTP/HTTPS requests), the JavaScript Engine (executes JS code), and the Data Storage layer (cookies, localStorage, IndexedDB). Each component is largely isolated, allowing browsers to sandbox tabs for security. Modern browsers like Chrome use a multi-process architecture so one crashed tab does not bring down the whole browser.

Fetching Resources: Networking and DNS

When you enter a URL, the browser first performs a DNS lookup to resolve the domain name to an IP address, leveraging OS-level and browser-level caches to speed this up. It then opens a TCP connection (with a TLS handshake for HTTPS) and sends an HTTP request to the server. The server responds with HTML, and the browser may need to issue many additional requests for linked CSS, JavaScript, images, and fonts. HTTP/2 and HTTP/3 reduce latency by multiplexing multiple requests over a single connection.

Parsing HTML and Building the DOM

The rendering engine parses the raw HTML bytes into tokens, then constructs the Document Object Model (DOM) — a tree of nodes representing every element on the page. Parsing is incremental; the browser does not wait for the full HTML document before starting to build the DOM. When the parser encounters a synchronous script tag, it pauses HTML parsing to fetch and execute the script, which is why placing scripts at the bottom of the body or using the 'defer' attribute matters for performance. External CSS blocks rendering but not parsing, while HTML5 introduced speculative (preload) scanning to fetch resources ahead of the parser.

Building the CSSOM and the Render Tree

In parallel with DOM construction, the browser parses all CSS into the CSS Object Model (CSSOM), another tree that captures all style rules and their specificity. The browser then combines the DOM and CSSOM into a Render Tree, which contains only the visible nodes with their computed styles applied. Elements with 'display: none' are excluded from the Render Tree, unlike elements with 'visibility: hidden' which still occupy space. This Render Tree is the input to the Layout (Reflow) stage.

Layout, Paint, and Compositing

During Layout (also called Reflow), the browser calculates the exact position and size of every node in the Render Tree based on the viewport. After layout, the Paint step converts each node into actual pixels on layers — this includes drawing text, colors, borders, and shadows. Finally, the Compositor thread combines the painted layers in the correct order and uploads them to the GPU for display, enabling smooth scrolling and CSS animations that bypass the main thread. Triggering layout repeatedly (layout thrashing) by reading then writing DOM geometry properties in a loop is a common and costly performance mistake.

The JavaScript Engine and the Event Loop

The JavaScript engine (e.g., V8 in Chrome) compiles JS source code through parsing, AST generation, bytecode compilation via an interpreter, and optional JIT (Just-In-Time) optimization for hot code paths. JS runs on a single main thread governed by the Event Loop, which continuously checks the Call Stack and the Task Queue (for callbacks like setTimeout) and the Microtask Queue (for Promises), always draining microtasks before picking the next macro-task. Long-running synchronous JS blocks the main thread, preventing rendering updates and making the page feel frozen. Use Web Workers to offload heavy computation to a background thread and keep the UI responsive.

Go deeper with an AI tutor that teaches this in context — and quizzes you on it.

Open the app — free to start