How Browsers Render HTML: Complete Guide

Learn how browsers parse, render, and display HTML. Understand the rendering pipeline and critical rendering path.

Introduction

Ever wondered how a browser turns HTML code into a visual web page? Let's explore the fascinating rendering process!

What You Will Learn

  • The browser rendering pipeline
  • How HTML is parsed
  • How CSS is applied
  • How the DOM and CSSOM are built
  • The critical rendering path

The Rendering Pipeline

Here's the complete process browsers go through:

graph TD
    A[HTML] -->|Parse| B[DOM Tree]
    C[CSS] -->|Parse| D[CSSOM Tree]
    B & D -->|Combine| E[Render Tree]
    E -->|Layout| F[Layout<br/>Box Model]
    F -->|Paint| G[Pixels on Screen]

Step 1: Parsing HTML

First, the browser parses HTML to create the DOM (Document Object Model).

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello!</h1>
    <p>Welcome.</p>
</body>
</html>

DOM Tree Structure

html
├── head
│   └── title
│       └── "My Page"
└── body
    ├── h1
    │   └── "Hello!"
    └── p
        └── "Welcome."

Step 2: Parsing CSS

Next, the browser parses CSS to create the CSSOM (CSS Object Model).

body {
    font-size: 16px;
}
h1 {
    color: blue;
    font-size: 24px;
}

CSSOM Tree Structure

body (font-size: 16px)
└── h1 (color: blue, font-size: 24px)

Step 3: Creating the Render Tree

The browser combines DOM and CSSOM to create the Render Tree.

  • Only visible elements are included
  • Contains both content and style information

Step 4: Layout (Reflow)

The browser calculates the layout (geometry) of each element:

  • Position
  • Size
  • Box model (content, padding, border, margin)

This is also called reflow.

Step 5: Painting

Finally, the browser paints the pixels on the screen.

It converts each element into actual pixels:

  • Text
  • Colors
  • Images
  • Shadows
  • Etc.

The Critical Rendering Path

The sequence of steps to render a page:

  1. HTML → DOM
  2. CSS → CSSOM
  3. DOM + CSSOM → Render Tree
  4. Layout
  5. Paint

Optimizing the Rendering Path

Fast CSS Loading

  • Put CSS in <head>
  • Minify CSS
  • Use media queries for conditional loading

Fast JavaScript Loading

  • Put <script> at end of <body>
  • Use async or defer
  • Minify JavaScript

Reduce Layout Thrashing

  • Avoid reading layout properties then writing repeatedly
  • Batch DOM changes

Browser DevTools

You can see the rendering pipeline in action!

Chrome DevTools:

  • Elements tab - See DOM
  • Styles tab - See CSS
  • Performance tab - Record and analyze rendering
  • Layers tab - See composited layers

Example: A Simple Page

Let's trace through rendering this page:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { background: white; }
        h1 { color: blue; }
        p { font-size: 16px; }
    </style>
</head>
<body>
    <h1>Hello!</h1>
    <p>Welcome to my page.</p>
</body>
</html>

Process:

  1. Parse HTML → DOM
  2. Parse CSS → CSSOM
  3. Build Render Tree
  4. Layout positions and sizes
  5. Paint everything!

Common Rendering Issues

Layout Thrashing

Reading then writing layout properties repeatedly:

// Bad - Causes reflows
for (let i = 0; i < elements.length; i++) {
    const height = elements[i].offsetHeight; // Read
    elements[i].style.height = height + 10 + 'px'; // Write
}

Forced Synchronous Layouts

Reading layout properties forces the browser to calculate layout immediately.

Paint Storms

Animating properties that trigger repaints instead of using transforms/opacity.

Best Practices

  • Optimize the critical rendering path
  • Minimize DOM size
  • Use efficient CSS selectors
  • Avoid layout thrashing
  • Use transforms for animations
  • Leverage browser caching

FAQs

Q: What's the DOM? A: Document Object Model - the tree representation of HTML.

Q: What's the CSSOM? A: CSS Object Model - the tree representation of CSS.

Q: What's reflow? A: When the browser recalculates layout (also called layout).

Q: What's repaint? A: When the browser redraws pixels (also called paint).

Related Topics

  • How Websites Work
  • First HTML Program

Summary

Browsers parse HTML and CSS, build trees, calculate layout, and paint pixels. Understanding this helps you optimize performance!

Next Topic

Now let's learn about Installing VS Code.

← Back to Syllabus