How Browsers Render HTML: The Complete Pipeline

How Browsers Render HTML

The complete journey from bytes to pixels

The Rendering Pipeline

When you load a webpage, your browser performs a complex series of operations to transform raw HTML, CSS, and JavaScript into the visual page you see. This process is called the critical rendering path.

flowchart LR A[HTML] --> B[DOM Tree] C[CSS] --> D[CSSOM Tree] B --> E[Render Tree] D --> E E --> F[Layout] F --> G[Paint] G --> H[Compositing] style A fill:#f0f9ff,stroke:#38bdf8 style B fill:#f0f9ff,stroke:#38bdf8 style C fill:#f0f9ff,stroke:#38bdf8 style D fill:#f0f9ff,stroke:#38bdf8 style E fill:#f0f9ff,stroke:#38bdf8 style F fill:#f0f9ff,stroke:#38bdf8 style G fill:#f0f9ff,stroke:#38bdf8 style H fill:#f0f9ff,stroke:#38bdf8

1. Parsing HTML → DOM

The browser reads raw HTML bytes and converts them into characters, then tokens, then nodes, and finally builds the Document Object Model (DOM) tree.

Bytes Tokens Nodes DOM

2. Parsing CSS → CSSOM

CSS is parsed into the CSS Object Model (CSSOM), a tree structure with styles applied according to specificity and inheritance rules.

CSS Tokens Rules CSSOM

Render Tree Construction

The browser combines the DOM and CSSOM to create the render tree, which only includes visible elements (no <head>, <script>, or display: none elements).

DOM Tree

html head body div script

Render Tree

html body div

Note: The render tree excludes non-visible elements like <head>, <meta>, and elements with display: none. Elements with visibility: hidden or opacity: 0 are included because they still occupy space.

Layout (Reflow) and Paint

Layout (Reflow)

The browser calculates the exact position and size of each visible element in the render tree. This is also called "reflow".

Viewport Header

Paint (Rasterization)

The browser fills in pixels for each element, converting vector shapes (like text and borders) to raster images.

Viewport Header

Performance Tip: Layout is the most expensive operation. Changing element sizes or positions triggers reflows. For animations, prefer transform and opacity which can be handled by the compositor without reflow or repaint.

Compositing and GPU Acceleration

Modern browsers use compositing to efficiently update the screen by layering elements and using the GPU for certain operations.

Background Layer Content Layer Overlay Layer Composite Layers

GPU Advantages

  • Parallel processing of layers
  • Hardware-accelerated transforms
  • Efficient scrolling and animation

Compositing Triggers

  • transform: translate/scale/rotate
  • opacity changes
  • will-change property

Interactive Demo: Render Process

Explore how different CSS properties affect the rendering pipeline:

Demo Element

Click buttons above to see different rendering operations...

Optimization Strategies

Problem Solution Impact
Excessive reflows Batch DOM changes, use requestAnimationFrame Reduces layout thrashing
Large paint areas Reduce complexity, use layers (will-change) Faster rasterization
Janky animations Use transform and opacity Smoother 60fps animations

Key Takeaways

  1. The browser rendering pipeline consists of DOM → CSSOM → Render Tree → Layout → Paint → Composite
  2. Layout (reflow) is the most expensive operation - minimize DOM changes that affect element geometry
  3. Modern browsers use GPU-accelerated compositing for smooth animations and scrolling
  4. Understanding the rendering process helps optimize for performance