` to understand the hierarchy and relationships between elements.

Constructing the DOM and CSSOM

Simultaneously, the browser encounters “ tags pointing to external CSS files. It fetches these resources and parses them to build the CSS Object Model (CSSOM). This model contains all style rules, selectors, and property values. Unlike HTML parsing, CSS is render-blocking: the browser halts the display of content until the CSSOM is fully constructed. This ensures that users see styled content rather than a flash of unstyled text.

How JavaScript Intervenes and Modifies Rendering

JavaScript is both powerful and disruptive to the rendering pipeline. When the parser encounters a “ tag, especially without `async` or `defer` attributes, it stops building the DOM. The browser must fetch, parse, and execute the script before continuing. This blocking behavior exists because JavaScript can modify the DOM and CSSOM dynamically using APIs like `document.getElementById()` or `element.style.color`.

After execution, the browser might need to re-enter the rendering process. If JavaScript adds a new “ or changes a class, the layout engine recalculates element positions. This triggers a process called reflow, which is computationally expensive. Modern browsers optimize this by batching style changes, but developers must still be cautious with excessive DOM manipulation.

The Render Tree and Layout

Once both the DOM and CSSOM are ready, the browser combines them into a render tree. This tree excludes invisible elements like “ or elements with `display: none`. Each visible node carries its computed style. The layout step then calculates precise geometry: the width, height, and position of every element on the viewport. For a responsive page, this calculation depends on screen size and viewport settings.

Painting, Compositing, and Final Output

After layout, the browser paints the pixels. Painting converts each visual part-backgrounds, borders, text shadows, and images-into actual colored pixels on the screen. Modern browsers break the page into layers to optimize performance. For instance, an element with `position: fixed` or a CSS animation may get its own layer. Compositing then combines these layers in the correct order, applying transparency and clipping.

The entire cycle repeats whenever the user interacts with the page. Scrolling, resizing the window, or clicking a button that triggers a CSS transition forces the browser to recalculate layout or repaint a portion of the screen. Understanding this pipeline helps developers write efficient code: minimizing reflows, using `transform` instead of `top/left` for animations, and deferring non-critical JavaScript.

FAQ:

What happens if a browser encounters invalid HTML?

Browsers use error recovery algorithms to parse malformed tags. They attempt to infer the intended structure, often closing missing tags automatically. This prevents total page failure but can lead to unexpected layout quirks.

Why does CSS block rendering but HTML does not?

CSS blocks rendering because the browser cannot display meaningful visuals without style information. HTML parsing proceeds incrementally, but the final visual output waits for the complete CSSOM to avoid a flash of unstyled content.

How does the `defer` attribute affect script loading?

The `defer` attribute tells the browser to download the script in parallel while continuing to parse HTML. Execution happens only after the entire document is parsed, just before the DOMContentLoaded event. This prevents blocking.

What is the difference between reflow and repaint?

Reflow recalculates the layout of elements, affecting their positions and sizes. Repaint only updates visual appearance like color or visibility without changing geometry. Reflow is more performance-intensive than repaint.

Reviews

Jane D.

This article clarified the critical rendering path perfectly. I finally understand why my animations were lagging. The explanation about reflow vs repaint is gold.

Mark S.

As a junior developer, I struggled with script loading order. The section on defer and blocking behavior solved a bug I had for weeks. Practical and concise.

Lisa K.

I appreciated the breakdown of DOM and CSSOM construction. The part about compositing layers was new to me. Very well structured without fluff.