Browser Architecture | jialinhuang

Four process types. Inside each, threads run in parallel. Click the Renderer to zoom in.

Browser Process

The boss. One per Chrome.

UI thread

IO thread

parallel

Network Process

Fetches bytes.

IO thread

Renderer Process · one per site

Turns HTML + JS into pixels. One per site (Site Isolation); cross-site iframes get their own. Click to zoom in.

Main thread — parse, React, style, layout, paint record

Compositor thread — scroll, composite, vsync

Raster thread pool — rasterize tiles

Worker threads, IO thread

main can block JS, compositor keeps scrolling

GPU Process

Talks to the GPU.

IO thread

↓ Click the Renderer to zoom in ↓

A click fires. Follow it across threads. React's work (orange) sits entirely on main — that's why a long render blocks paint, but scroll still runs on compositor. Hover any tag for details.
Processes vs threads: the three Renderer lanes are threads inside one Renderer Process; Browser, Network, and GPU are separate OS processes.
Note: events are spread out for readability. In a healthy app, all 36 typically fit inside one 16ms vsync interval. Each extra vsync the timeline crosses = one dropped frame.

BrowserprocessUI + IO

NetworkprocessIO

Main threadReact lives here

Compositor threadalways on, 60fps

Raster poolN workers, parallel

GPUprocessIO

React work

Main thread

Compositor

Raster pool

Browser

Network

GPU