Browser Rendering Pipeline

DOM: the Document Object Model is the browser's in-memory tree built from parsing HTML. JavaScript manipulates it, and the browser uses it together with styles to build what is painted on screen.

Layout/reflow: after styles are computed, the browser calculates geometry — where each box sits and how big it is. Changing a layout property (like width) triggers reflow, which can be expensive if it cascades.

Painting: the step that rasterizes visual content (colors, borders, text) into pixels. Properties like color or box-shadow cause repaints, which are cheaper than full reflows but still cost performance.

Compositing: the browser splits the page into layers and lets the GPU move, scale, or fade them. Animating transform and opacity avoids layout and paint, producing smooth 60fps motion.

Layout thrashing: interleaving DOM reads (offsetHeight) and writes in a loop forces the browser to recompute layout repeatedly. Batching reads then writes, or using requestAnimationFrame, avoids this stall.