Fundamentals · Bytes to pixels

How browsers render content-style app

Illustrative system design for a bytes to pixels app like How browsers render content: 4 topics to read, from requirements to deep dives.

Illustrative design, not How browsers render content’s actual implementation. Arrowbox is not affiliated with How browsers render content’s owner. Disclaimer

Start with Bytes to pixels Read for freeUpdated 2 Oct 2026

Core

From bytes to pixelsBeginner · 33 min read
The browser turns HTML into a DOM and CSS into a CSSOM, combines them into a tree of boxes it can lay out, paints those boxes into layers and composites the layers into a frame.
What blocks the parser and the first paintBeginner · 34 min read
Stylesheets hold back painting, classic scripts stop the HTML parser, and fonts can hide text; async, defer, modules and the preload scanner change who waits for whom.
The frame and the event loopIntermediate · 40 min read
After the first paint, every visual change waits for the event loop's next rendering opportunity: tasks and microtasks run, requestAnimationFrame callbacks fire, then style, layout and paint run once for the batch.
Layers and compositingIntermediate · 34 min read
The browser paints parts of the page into separate layers and a compositor thread moves, fades and scrolls them on the GPU without asking the main thread, which is why transform and opacity animate smoothly and top does not.