From markup to a placed page
A browser does not draw HTML source code directly. It first parses the markup into a Document Object Model (DOM), a tree describing elements such as headings, paragraphs, and images. It also reads CSS—the rules that set appearance and dimensions—and matches those rules to the elements. The result tells the browser, for example, which font a paragraph uses and how wide its box should be.
Why a small edit can move a lot
The browser then performs layout: it calculates each visible element’s size and position. Text makes this step especially dependent on context. Change a font or narrow a column, and a sentence may wrap onto another line; that makes its paragraph taller and can push everything below it downward. A single change can therefore require fresh calculations across a large part of the page.
Once positions are known, the browser paints the page by deciding which colors, borders, glyphs, and images to put where. It converts those drawing instructions into pixels, then combines layers—such as a scrolling page and a moving animation—into the image shown on screen.
Browsers can reuse work when a change affects only a small part of the picture, but they cannot always skip layout. Changing a box’s width may alter line breaks and trigger new positioning; changing only its background color usually does not. The costly question is not simply what changed, but whether that change affects where other things must go. That is why a seemingly minor update can make a page visibly reflow before it is painted again.
