How modern browsers work

September 23, 2025

Illustration comparing layout tree construction and layout calculation in a web browser; the left shows a window with a tree diagram representing layout structure, and the right shows a window with measured layout and ruler graphics indicating size calculation.

This article dives into how modern browsers work – focusing on Chromium’s architecture and internals, while noting where other engines differ. We’ll explore everything from the networking stack and parsing pipeline to the rendering process via Blink, JavaScript engine via V8, module loading, multi-process architecture, security sandboxing, and developer tooling. The goal is a developer-friendly explanation that demystifies what happens behind the scenes.

Source: How modern browsers work – by Addy Osmani – Elevate

Knowing how a modern browser works:

  • How it downloads resources
    How it parses HTML, JavaScript, and CSS
    How it renders the DOM and then paints to the screen

All of these things have a significant impact on the performance of our site.

Having an understanding of how modern browsers work can really help us improve the quality of what we build.