W
WebDevGuide
🖥️

Browser Rendering

DOM, CSSOM, render tree, layout, paint, and composite stages

How Browsers Render Pages

From HTML bytes to pixels on screen

When your browser receives HTML from a server, it goes through a multi-step process to convert that text into the visual page you see. This process, called the Critical Rendering Path, involves parsing, tree construction, layout calculations, and painting pixels.

Understanding this pipeline helps you write more performant code. Each stage has performance implications, and knowing what triggers expensive operations like layout and paint helps you avoid janky animations and slow page loads.

The Critical Rendering Path

The complete pipeline from HTML to pixels

Browser Rendering Pipeline

Watch how the browser transforms code into visual content

📄 HTML
🌳 DOM
🎄 Render Tree
📐 Layout
🖌️ Paint
🖼️ Composite
🎨 CSS
🌲 CSSOM
Stage 1: HTML Parsing

Browser receives HTML bytes and begins parsing into tokens

⚡

Render Blocking

CSS is render-blocking - the browser won't paint until CSSOM is complete. Put critical CSS inline and defer non-critical styles.

🚀

GPU Acceleration

Use transform and opacity for animations - they skip Layout and Paint, going straight to Composite.

DOM Construction

Parsing HTML into a tree structure

Building the Document Object Model

The browser parses HTML bytes into a tree of nodes

Bytes
3C 68 74...
Characters
<html>...
Tokens
StartTag
Nodes
Element
DOM Tree
🌳
Step 1: Bytes Received

Browser receives raw bytes from the network

HTML Source
<html>
  <head>
    <title>Page</title>
  </head>
  <body>
    <div>
      <p>Hello</p>
    </div>
  </body>
</html>
JavaScript Access
document.documentElement  // html
document.head             // head
document.body             // body
document.querySelector('p')  // p

Render Tree

Combining DOM and CSSOM for visible elements

Creating the Render Tree

Only visible elements with computed styles make it to the render tree

🌳 DOM

<html>
<head>
<body>
<div>
<p>
<span>
<p>

🎨 CSSOM

body {
margin: 0; font-family: sans-serif
}
div {
color: blue; padding: 20px
}
p {
font-size: 16px; line-height: 1.5
}
.hidden {
display: none
}

🎄 Render Tree

Building...
Step 1: DOM Tree

Start with the complete DOM tree containing all elements

💡

What's NOT in the Render Tree?

  • • Elements with display: none (completely hidden)
  • • The <head> element and its children
  • • Script and meta tags
  • • Note: visibility: hidden elements ARE included (they take up space)

Layout & Paint

Calculating positions and drawing pixels

From Boxes to Pixels

Layout calculates geometry, paint fills in the visuals

📐 Layout Phase

🎄

Render Tree Input

🖌️ Paint Phase

Waiting for layout...

Render Tree Input

Layout receives the render tree with computed styles

⚠️

What Triggers Layout (Expensive!)

  • • Changing width, height
  • • Changing padding, margin
  • • Adding/removing elements
  • • Changing font-size
  • • Reading offsetWidth, offsetHeight
  • • Reading getBoundingClientRect()
  • • Window resize
  • • Changing position

Composite Layers

GPU acceleration and efficient updates

Layer Composition

How the browser uses layers for smooth animations

Layer 0
Background
Single Layer

Simple pages render on a single layer

GPU Accelerated (Composite Only)
transform transform: translateX(100px)
opacity opacity: 0.5
will-change will-change: transform
filter filter: blur(4px)

These properties skip Layout and Paint, running at 60fps

Triggers Layout (Expensive)
width/height width: 200px
margin/padding margin: 10px
top/left top: 50px
font-size font-size: 16px

These trigger full Layout, Paint, Composite cycle

💡

What Creates a New Layer?

  • • transform: translateZ(0) or translate3d()
  • • will-change: transform, opacity
  • • position: fixed or position: sticky
  • • Elements with CSS filter or backdrop-filter
  • • <video>, <canvas>, <iframe> elements

Warning: Too many layers consume memory. Use DevTools Layers panel to inspect.

Animation Best Practices
Avoid (causes layout)
.element { animation: move 1s; }
@keyframes move { to { left: 100px; } }
Prefer (GPU accelerated)
.element { animation: move 1s; }
@keyframes move { to { transform: translateX(100px); } }

Key Terms to Remember

Master these terms for technical interviews