A browser turns a webpage into pixels by parsing its HTML and CSS, calculating how the content should look and where it belongs, then painting and displaying the result. JavaScript can change the document or its styles along the way, and later updates may reuse some work rather than repeat every stage.
What happens between loading a page and displaying it?
A useful overview is: HTML becomes the DOM, CSS becomes the CSSOM, scripts may change either, and the browser calculates styles and layout before painting, rasterizing and compositing the visual result. This is a mental model, not a fixed sequence every browser follows for every update.
As an Amazon Associate I earn from qualifying purchases.
- Resources arrive. A navigation loads the document and may load stylesheets, scripts, images and other media it references. The browser can begin parsing HTML as data arrives; resource loading and script execution affect when a first render is possible.
- HTML becomes the DOM. The parser turns markup into a tree of document nodes. JavaScript can inspect and modify that tree through DOM APIs.
- CSS becomes the CSSOM. The browser parses stylesheets into a representation of their rules, matches rules to document nodes and applies the CSS cascade to determine styles.
- Scripts can change the inputs. JavaScript may add, remove or modify document nodes and styles. The browser then updates the rendering work needed to reflect those changes; scripts do not simply draw the page on their own.
- Style calculation and layout establish appearance and geometry. The browser determines which content is rendered and calculates the size and position of rendered objects. Recalculating geometry after an earlier layout is often called reflow.
- Paint and rasterization prepare the visual output. Painting describes drawing work for text, colors, borders, shadows, images and other details. Rasterization turns that drawing work into pixel data.
- Compositing assembles the result. The browser can combine visual layers for display. Depending on the change, it may be able to reuse existing work instead of repeating the earlier stages.
MDN’s explanations of how browsers work and the critical rendering path describe the general concepts. The detailed rendering pipeline documentation from Chromium’s RenderingNG describes Chromium’s implementation, not a universal blueprint for all browsers.
Free tools Windows power users keep installed
One-click scans. No signup required.
What do layout, paint, rasterization and compositing mean?
- Layout answers questions such as how wide an element is and where it sits relative to other content.
- Paint records the visual details to draw for laid-out content, including text, fills, borders and shadows.
- Rasterization converts drawing work into pixel data.
- Compositing combines layers into the image presented for display.
These labels describe different kinds of work, but the browser may schedule them differently, update only part of a page or skip stages when an update does not need them.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Does every page update repeat the whole rendering pipeline?
No. A change to an element’s width, height or position can require a new layout and repaint affected content. A change to a visual detail such as color or shadow may require painting without changing layout. Some scrolling and animation updates can follow compositing paths that skip layout or paint in Chromium. The route depends on the property, page, browser and device; no CSS property should be assumed to be cost-free in every situation.
Chromium’s documentation describes cases where animation and scrolling can skip layout, pre-paint and paint. Other browser engines may organize and schedule work differently, so treat that detail as Chromium-specific rather than a promise about every browser.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Why does this process matter when optimizing a page?
The stage an update triggers helps explain its rendering cost. If an interaction feels slow, inspect the rendering work in browser developer tools rather than assuming every visual change has the same cause or cost. The pipeline is a guide for asking what work is happening; performance depends on the actual page and environment.
Recommended Free Tools
Quick Recap
Best Value
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
