Rendering and the browser pipeline

you trace every step between the HTML arriving and the first pixel appearing, looking for the one that waits.

Critical rendering path

you open the elements panel and the tree you see is not the HTML you wrote, because scripts changed it.

Document Object Model

the page is blank until the stylesheet finishes downloading, even though the HTML arrived immediately.

CSSOM

the element is in the DOM and has styles, but it never appears, because it was never given a box.

Render tree

you changed one element's width and the browser had to recompute the position of half the page.

Reflow

you changed a colour and nothing moved, but the browser still had to redraw those pixels.

Repaint

the first scroll into a long page stutters once and is smooth on the way back up.

Rasterisation

the animation stays smooth even while your JavaScript is busy, because it never touches the main thread.

Compositing

you added `will-change: transform` to make the animation smooth and the tab's memory use went up.

Layer promotion

you view source and there is nothing in the body but an empty div and a script tag.

Client-side rendering

the HTML arrives with the content already in it, and the page is readable before any script runs.

Server-side rendering

every page was rendered once at build time and the server is just handing out files.

Static site generation

the page is served from the last build, and the first visitor after the timer expires triggers a fresh one in the background.

Incremental static regeneration

the header and layout arrive immediately and the slow part of the page fills in a moment later, in the same response.

Streaming SSR

the page looks finished but clicking a button does nothing for another two seconds.

Hydration

the console warns that the server HTML did not match, and the text flickers to something else on load.

Hydration mismatch

most of the page is plain HTML that never hydrates, and only the three interactive widgets ship JavaScript.

Islands architecture

the page is interactive on arrival because no framework code re-ran to make it so.

Resumability

the form still submits when the JavaScript fails to load, because it was a real form pointing at a real endpoint.

Progressive enhancement

you describe the whole interface for the new state and something else works out the smallest set of DOM changes.

Virtual DOM

the component's state survived the re-render because the framework decided it was the same element as before.

Reconciliation

you delete the second row and the text you had typed into the third row is suddenly in the second.

List key

the component function runs again from the top, even though nothing on screen ended up changing.

Re-render

the page appears for a fraction of a second as raw serif text before the styles land.

Flash of unstyled content

your script ran before the images finished, because it only waited for the markup to be parsed.

DOMContentLoaded