TL;DR
An open-source, interactive guide walks readers through how browsers process web pages, using many small demos to illustrate URL handling, DNS resolution, TCP handshakes, HTTP exchanges, HTML parsing, and rendering. The material is intended to build intuition for engineers and curious users while deliberately omitting some low-level details.
What happened
A concise, interactive tutorial called “How Browsers Work” presents a sequence of small, playable examples that trace the path from typing text into the address bar to pixels appearing on screen. The guide demonstrates how browsers normalize address-bar input into URLs or search requests, how a URL is formatted into an HTTP request with headers such as Host and Accept, and how DNS converts domain names into IP addresses. It simulates the TCP three-way handshake and shows HTTP requests and responses traveling over the established connection. The site then illustrates streaming HTML parsing into a DOM tree, notes that parsing is error-tolerant and can pause for scripts, and explains how the DOM and CSS produce a render tree. Finally, it walks through the rendering pipeline—layout, paint, and composite—and highlights which changes trigger which stages. The project is published as open source and invites contributions.
Why it matters
- Interactive examples help developers and interested readers form a practical mental model of browser internals.
- Showing where parsing and rendering can pause or rerun clarifies performance trade-offs for page authors.
- Demonstrating network steps—from URL to DNS to TCP to HTTP—connects front-end behavior to underlying protocols.
- Open-source publication allows the community to suggest fixes and enhancements to the tutorial.
Key facts
- The guide converts arbitrary address-bar input (e.g., "pizza") into search or normalized URL forms.
- HTTP requests include headers such as Host and Accept; Host identifies the target server.
- DNS resolution is required to turn a domain name into an IP address usable by the browser.
- TCP establishes a reliable connection via a three-step handshake using sequence and acknowledgement numbers.
- HTTP requests and responses travel over the TCP connection before the browser begins rendering.
- HTML is fed into a streaming, error-tolerant parser that builds the DOM while bytes arrive.
- A <script> tag can pause parsing so the script can run and potentially modify the DOM.
- The DOM and CSS together produce a render tree used by the rendering pipeline.
- Rendering occurs in stages—layout (reflow), paint, and composite—and not every change triggers every stage.
- The guide is open source and explicitly omits many lower-level details such as TLS, some HTTP versions, and DNS nuances.
What to watch next
- Try the address-bar and HTTP demos to see how input is normalized into URLs and requests.
- Use the TCP handshake and packet simulations to observe how sequence and acknowledgement numbers enforce reliability.
- Watch the HTML parsing demo to see streaming parsing, error tolerance, and how scripts can pause parsing.
Quick glossary
- URL: A Uniform Resource Locator that specifies the address of a resource on the web, used by browsers to identify where to send requests.
- DNS: Domain Name System, a service that translates human-readable domain names into IP addresses used for network routing.
- TCP three-way handshake: The process (SYN, SYN-ACK, ACK) used to establish a reliable TCP connection between a client and a server.
- DOM: Document Object Model, the browser's in-memory tree representation of an HTML document that is used by rendering, styling, and scripting.
- Rendering pipeline: The sequence of browser stages—layout (reflow), paint, and composite—that turn the DOM and CSS into pixels on screen.
Reader FAQ
Who is this guide intended for?
Engineers and curious people who use the web but lack a detailed mental model of how browsers work.
Is the guide open source?
Yes; the author has published the project as open source and invites issues and pull requests.
Does the guide cover TLS/SSL and all HTTP versions?
No. The guide intentionally omits many critical details, including TLS/SSL and differences between HTTP versions.
Will the guide show real network traffic from my browser?
not confirmed in the source
How Browsers Work An interactive guide to how browsers work. Why? The guide is for engineers and curious people who use the web every day, but never built a mental…
Sources
- Show HN: An interactive guide to how browsers work
- How the web works – Learn web development – MDN Web Docs
- How Web Browsers Work: A Simple Guide to Loading and …
- How modern browsers work
Related posts
- How I Archived a Decade of Personal Memories Using Spotify Playlists
- Why Unix historically split /bin, /sbin and /usr — a practical origin story
- Cold-Blooded Software: How to Build Projects That Survive Long Pauses