Rendering Pipeline

display: none keeps the element out of the render tree entirely: no box, no space, nothing painted. visibility: hidden still generates a box that occupies its layout space and only skips painting, so revealing it costs a repaint rather than a relayout.

A classic script with no attributes is parser-blocking: the parser stops at the tag, waits for app.js to download and execute, then resumes. Placed before </body> the whole document is already parsed, so the user sees content first.

DOMContentLoaded fires as soon as the HTML has been fully parsed into a DOM and deferred scripts have run. It does not wait for images, iframes or stylesheets. The window load event fires later, once every subresource has finished loading.

Each write leaves layout invalidated, and the next iteration's getBoundingClientRect forces the browser to recompute it, so 500 elements cost roughly 500 synchronous layouts. Reading all the widths first and writing afterwards collapses that to a single layout.

Geometry reads such as offsetWidth and getBoundingClientRect must return current values, so the browser first flushes any pending style recalculation and layout synchronously, inside your task. When nothing has been invalidated since the last layout, the same read is nearly free.

An animation frame callback runs during the browser's rendering update: after the task that registered it has finished and its microtasks have drained, and before style recalculation, layout and paint for that frame. It is the last hook before pixels.

Each time the view is shown a new loop starts, and nothing ever stops the old ones, so every frame now runs several loops at once over detached elements. Store the handle requestAnimationFrame returns and call cancelAnimationFrame on teardown.

Layout computes the used size and position of every box in the render tree. It is invalidated by DOM structure changes, geometric style changes, edited text, viewport resizes, and late-arriving fonts or images that change how much space content needs.

left is a layout property: changing it invalidates geometry, so the browser re-runs layout, repaints the affected content and recomposites. transform on a composited layer changes only the matrix the compositor uses to draw an already-rasterized texture, so layout and paint are skipped entirely.

Both download in parallel with parsing. An async script executes the moment its download finishes, interrupting the parser, in unpredictable order. A defer script executes only after parsing completes, in document order.

The browser will not paint until it has a complete CSSOM, because painting with partial styles would show unstyled content and then repaint it. Meanwhile the HTML parser keeps running and building the DOM — only rendering is held, not parsing.

el.style.width reads only the element's inline style attribute, so it is empty unless something set it inline. el.offsetWidth reports the element's actual rendered border-box width, so the browser may have to compute pending layout before it can answer.

Paint records the drawing commands for each box — backgrounds, borders, text, shadows — into a list, per layer. Compositing rasterizes those layers into GPU textures and assembles them, with each layer's transform and opacity applied, into the frame on screen.

It is a high-resolution time in milliseconds, measured from the same origin as performance.now(), marking the start of the current frame. Using elapsed time between frames keeps motion at the same real-world speed on any refresh rate and across dropped frames.

The render tree pairs each rendered node with its computed style to produce the boxes the browser lays out. It is not a copy of the DOM: head content and display:none subtrees are missing, pseudo-elements add boxes with no node, and one element can produce several boxes.

Browsers promote content that must be drawn independently: 3D transforms, running transform or opacity animations, a will-change hint, video and WebGL canvas, and some fixed or scrolling content. Content that paints above a promoted layer may also need its own layer so the original paint order survives.

A module script is deferred by default: it never blocks the parser and runs after parsing, in document order. The defer attribute is therefore redundant, while async still works and makes it run as soon as its graph is ready — including on inline module scripts.

The preload scanner is a secondary, lightweight parser that scans the raw HTML ahead of the main parser and starts downloading resources it finds in markup attributes. It cannot see anything that only exists after CSS or JavaScript runs.

Bytes are decoded to characters, a tokenizer state machine turns those into start-tag, end-tag, text and comment tokens, and a tree constructor turns tokens into nodes and attaches them to the DOM. It runs on each chunk as it arrives so the page can render before the document ends.

Coalesce the scroll events into one requestAnimationFrame callback per frame with a scheduled flag, and inside that callback read every anchor rectangle first and write every transform afterwards. That yields one layout per frame instead of one per panel per event.

No frames are produced for a hidden page, so the loop is suspended. The first callback after the page becomes visible carries a timestamp about a minute past the stored one, and delta-time integration applies that whole gap in a single step. Clamp the delta.

Roughly 30 fps, not 40. The display only presents at its refresh boundaries, so a frame that misses one deadline waits for the next: effective rates fall to submultiples of the refresh rate — 60, then 30, then 20 — rather than degrading smoothly.

Scope depends on whether the change can escape the element. If the element's own size is fixed and its overflow cannot reach ancestors, the browser relayouts only its subtree; content-dependent sizing, auto-layout tables, in-flow siblings and a newly appearing scrollbar push the work document-wide.

The CSS animation was handed to the compositor thread, which owns the layer's texture and can tick the transform and draw frames without the main thread. The JavaScript animation writes styles from main-thread callbacks, so while that thread is blocked nothing updates.

will-change is a hint that a property is about to change, letting the browser prepare — usually by creating a compositing layer up front. Applied broadly or left on permanently it keeps those layers alive, consuming GPU memory and compositor bookkeeping, which slows the page instead of speeding it up.

A dynamically inserted script never blocks the HTML parser and behaves as async by default: each one runs as soon as its own download finishes, so order is unpredictable. Setting script.async = false before appending restores insertion-order execution.

An @import is only discovered after the parent stylesheet has been downloaded and parsed, so the two requests run one after the other instead of in parallel. The preload scanner cannot see inside CSS, so nothing starts the second fetch early.

CSS containment promises that an element's internals cannot affect the rest of the page, so layout can stop at its boundary. content-visibility: auto goes further and skips off-screen subtrees entirely, at the price of guessed sizes, scroll-position accuracy and some side effects on positioning and clipping.

Called during parsing it injects markup into the token stream, but called after the document has loaded it implicitly reopens the document and wipes everything already there. Injecting a script tag with it also forces a parser-blocking fetch on the critical path.