A browser does not simply read HTML from top to bottom and draw a finished page. It builds several representations, coordinates multiple threads and processes, and repeatedly updates parts of the result.
This article is part of the software engineering technologies guide library.
From source to structure
HTML becomes a document tree while CSS rules become a style model. The browser combines them to determine which visible nodes need boxes and how those boxes should look.
Layout and paint
Layout calculates geometry. Paint records drawing operations such as text, borders, and backgrounds. Compositing assembles rasterised layers into the final frame.
Why performance changes
JavaScript, font loading, image dimensions, animations, and DOM changes can trigger different parts of the pipeline. Stable dimensions and transform-based motion generally reduce avoidable layout work.
Image updated: embedded writing removed; article content and factual claims unchanged.
