How a Browser RendersThe pipeline from HTML to pixels, and which changes are cheap.ComputingEvery visual change re-enters this pipeline at some stage.1ParseHTML becomes the DOM; CSS becomes the CSSOM.2StyleMatch rules to nodes; compute the final value of every property.3Layout (reflow)Calculate the size and position of every box. Expensive.4PaintFill in pixels: colours, borders, shadows, text.5CompositeAssemble the layers, on the GPU. Cheapest of all.COST OF A CHANGEwidth, top, font-size → layout, paint, compositecolor, background → paint, compositetransform, opacity → composite onlyAnimate transform and opacity, never width, height or top. Those twoskip layout and paint entirely.How a Browser Renderslearnposters.com
How a Browser Renders — printable computing wall chart from LearnPosters. Free vector PDF, US Letter and A4.

How a Browser Renders, step by step

Every visual change re-enters this pipeline at some stage.

  1. ParseHTML becomes the DOM; CSS becomes the CSSOM.
  2. StyleMatch rules to nodes; compute the final value of every property.
  3. Layout (reflow)Calculate the size and position of every box. Expensive.
  4. PaintFill in pixels: colours, borders, shadows, text.
  5. CompositeAssemble the layers, on the GPU. Cheapest of all.

Cost of a change

  • width, top, font-size → layout, paint, composite
  • color, background → paint, composite
  • transform, opacity → composite only

Animate transform and opacity, never width, height or top. Those two skip layout and paint entirely.

Questions about the How a Browser Renders poster

What’s on the How a Browser Renders poster?
5 numbered steps, with a full worked run-through. Every visual change re-enters this pipeline at some stage. Parse — HTML becomes the DOM; CSS becomes the CSSOM.; Style — Match rules to nodes; compute the final value of every property.; Layout (reflow) — Calculate the size and position of every box. Expensive.; Paint — Fill in pixels: colours, borders, shadows, text.; Composite — Assemble the layers, on the GPU. Cheapest of all.. Animate transform and opacity, never width, height or top. Those two skip layout and paint entirely.
Who is the How a Browser Renders poster for?
How a Browser Renders belongs to the Computing section rather than to a school year, because computing is not something one grade owns. Anyone learning the web can pin it up — a beginner, a student mid-course, or someone revising years later.
When should you use the How a Browser Renders poster?
Changing a colour is cheap. Changing a size is not. Know which one you are doing. A wall chart earns its place by being glanceable from where the work is happening, so How a Browser Renders belongs on the wall where that computing work actually happens, within glancing distance, rather than filed away.
What other posters go with How a Browser Renders?
Accessibility, ARIA and Cookies & Storage sit alongside How a Browser Renders in the Computing section. Printed together they make a wall rather than a single sheet, which is how a reference set actually gets used.AccessibilityARIACookies & Storage
Is the How a Browser Renders poster free to download and print?
Yes. How a Browser Renders downloads as a free PDF with no account, no email and no watermark, like everything else in the Computing section. Print as many copies as you like for a home, a classroom, a library or a tutoring group; reselling the file is the only thing the licence rules out.Read the licence
What size does the How a Browser Renders poster print at?
How a Browser Renders is a vector PDF laid out for US Letter, and prints on A4 with Fit to page — the same file, no separate download. Because every mark on it is drawn rather than photographed, it stays sharp enlarged to A3, A2 or A1 at a copy shop. Colour carries emphasis only, so a greyscale print of How a Browser Renders loses nothing.Printing guide

Related posters

Charts that sit alongside How a Browser Renders on the same wall.

Browse every Computing poster, or start from the full catalogue.