How Browsers Work

The server has sent back the bakery's homepage: a few kilobytes of text. A moment later you see photos, a coloured menu and a working "Add to order" button. Everything you write as a frontend developer passes through the browser's pipeline, so knowing its stages explains why some pages feel instant and others stutter.

The rule

Browsers turn text into pixels: parse, style, lay out, paint.

1. Parse the HTML into the DOM. The browser reads the HTML from top to bottom and builds the DOM (Document Object Model), a tree of objects, one per element. <body> is a branch; the <h1> and <ul> inside it are its children. JavaScript later reads and changes the page through this tree.

2. Parse the CSS. Stylesheets become the CSSOM, a similar tree of style rules. The browser matches rules to DOM nodes to work out each element's final styles. Elements hidden with display: none are left out of what gets drawn.

3. Layout. With styles known, the browser calculates geometry: how wide each box is, where it sits, how text wraps.

4. Paint and composite. It fills in pixels (text, colours, borders, images), often on separate layers, then combines the layers into the final picture on screen.

Where scripts fit. When the parser meets a plain <script src="app.js">, it stops building the DOM, downloads and runs the script, then carries on. That pause is why scripts are often marked defer:

A deferred script downloads in the background and runs only after the HTML has been parsed, in the order the scripts appear.

The part of a browser that does all this is its rendering engine. Chrome and Edge use Blink, Firefox uses Gecko and Safari uses WebKit. They follow the same web standards, which is why one page works in all of them, though small differences still exist.

The shortcut

When a change happens on a page, ask "How far back up the pipeline does this push the browser?" Changing a colour only needs a repaint. Changing a width moves boxes, so layout runs again, then paint. Adding elements changes the DOM itself. The further back, the more work.

A frequent slip: placing a large script without defer at the top of the page and wondering why the page stays blank. The parser is waiting for the script.

Drills

Answer fast — trust the rule.

Remember

• Browsers turn text into pixels: parse, style, lay out, paint.
• Ask how far back up the pipeline a change pushes the browser.
• Trap: a plain script pauses parsing; use defer for page scripts.