"How browsers work" in 40 seconds, every frame drawn in JavaScript by Opus 5.5 (Addy Osmani, X video)

Summary This animation illustrates the full lifecycle of a web browser loading and rendering a web page in 40 seconds, from URL entry to painting, JavaScript execution, and multi-process architecture. Created as an animation drawn in JavaScript by Claude Opus 5.5 and shared by Chrome engineering lead Addy Osmani, it breaks down browser internals into charming, bite-sized visual explanations.

What is shown

• [00:00] - Type a URL (Fetch): A browser address bar with https://example.com/ being typed by an animated cherry mascot.
• [00:02] - DNS Lookup: Blueprint diagram breaking down the scheme, host, and path, resolving an IP address (203.0.113.7) after a cache miss.
• [00:04] - TCP + TLS Handshake: Mascot delivers a "hello" message to a server, receiving a certificate and establishing shared encryption keys.
• [00:06] - HTTP/2 Connection Multiplexing: Browser-to-server single connection multiplexing multiple parallel streams (html, css, js, img) contrasted against HTTP/1.1's six connections.
• [00:08] - Bytes Reach the Renderer: Mascot feeds incoming HTML byte stream (<!doctype html>...) into a sandboxed "renderer process".
• [00:10] - Parse HTML into the DOM: Tokenizer builds the Document Object Model (DOM) tree while issuing network requests for CSS.
• [00:12] - Scripts Can Pause the Parser: DOM tree visualized as a growing plant where a running <script> pauses HTML parsing.
• [00:14] - CSS Becomes Computed Style: The CSSOM tree attaches computed styling rules (colors, fonts, sizes) to DOM nodes.
• [00:16] - Layout (Size and Position): Mascot pulls out a tape measure to calculate geometry and coordinates of page elements.
• [00:18] - Paint (A List of Draw Calls): A display list of draw instructions (drawRect, drawText, drawImage) queued back-to-front.
• [00:20] - Layers & Compositing: Exploded layer stack (animated button, fixed header, image, base page), showing how elements move without triggering a repaint.
• [00:23] - Raster (Tiles in Parallel): Little robot workers divide layers into 256×256 tiles to rasterize in parallel and upload to GPU memory.
• [00:25] - Composite on the GPU: Friendly GPU processor chip composites the scene within a 16.7 ms frame budget targeting 60 fps.
• [00:27] - V8 Execution Pipeline: JavaScript compilation pipeline showing AST to Ignition interpreter, Sparkplug, Maglev, and Turbofan optimizing JIT, followed by a deoptimization ("deopt") trigger.
• [00:30] - Garbage Collection: Generational garbage collector sweeping unreferenced objects from the young generation to the old generation heap.
• [00:32] - Site Isolation: Sandboxing iframes and cross-origin pages (bank.example vs ads.example) into isolated renderer processes.
• [00:34] - Multi-Process Architecture: Architectural map depicting a central Browser Process coordinating specialized processes (GPU, Network, Utility, Extension, and individual site Renderers).
• [00:37] - Final Screen: The rendered page displays "hello, web" with the title banner "how browsers work".

Claims & numbers

• HTTP/1.1 vs HTTP/2: HTTP/1.1 uses about six connections, whereas HTTP/2 uses "one connection · many streams" [00:06].
• Raster tiles: Rasterized in 256×256 pixel tiles [00:23].
• Frame budget: 60 fps targeting a 16.7 ms budget per frame for smooth rendering [00:25].
• DNS resolution: Resolves example.com to 203.0.113.7 [00:03].

Notable quotes

• None (the video contains no spoken dialogue or vocal narration).

Assessment A creative educational demo illustrating low-level software architecture through programmatically drawn 2D vector animations. Every step accurately reflects Chromium engine internals (Blink, V8, and CC compositing pipelines) without promotional hype or misleading technical claims.

Lyrics & themes

• The audio track is completely instrumental, featuring a fast-paced, playful electronic beat with percussive clicks, chimes, and paper rustling effects to match the visual pacing.
• The thematic structure follows the classic "life of a web request" sequence: Network Fetch $\rightarrow$ DOM/CSSOM Construction $\rightarrow$ Layout $\rightarrow$ Paint $\rightarrow$ Compositing & GPU Rasterization $\rightarrow$ JavaScript Execution (V8 & GC) $\rightarrow$ Process Security & Isolation.

Lore & references

• V8 Compilation Pipeline: Specifically names Chrome's multi-tier JavaScript compilation pipeline (Ignition, Sparkplug, Maglev, Turbofan) and visually demonstrates JIT deoptimization when variable types change.
• Blink Renderer Architecture: References core Chromium rendering concepts including display lists, site isolation, multi-process architecture, and 256×256 raster tiles.
• Mascots: Features an anthropomorphic red berry/cherry character and friendly chip/robot mascots acting as network couriers, layout inspectors, and raster workers.

Visual style & craft

• Distinctive hand-drawn blueprint and notebook design rendered with textured graph paper, warm pastel fills, pencil-sketch cross-hatching, and dark blueprint screens.
• Alternates rhythmically between blueprint technical schematics (dark navy background with glowing cyan vectors) and whimsical storybook animations (cream-colored paper with character animations).
• The clean vector paths, consistent geometric layouts, and dynamic procedural transitions reflect pure JavaScript Canvas/SVG procedural rendering generated by Claude Opus 5.5.

Described by gemini-3.8-flash on 2026-10-05 from the video's audio and frames.