Low-Level Web Rendering

Understand how pixels actually get on screen, then pick the right tool: DOM, Canvas 2D, or GPU (WebGL/WebGPU).

The browser render pipeline

Each frame the browser may run, in order:

1. JS — your handlers/animations mutate the DOM/styles.
2. Style — compute which CSS rules apply (recalc styles).
3. Layout (reflow) — compute geometry/positions. Triggered by size/position/text changes.
4. Paint — fill pixels for each layer (text, colors, images, borders).
5. Composite — the GPU assembles layers into the final image.

Cheapest path: change only composite (transform/opacity). Most expensive: trigger layout every frame.