Stop 01 · Internet & Web BasicsTopics · 4/14

Browser rendering

In short

Your HTML file is just text. The browser turns it into pixels through a fixed set of steps, and knowing those steps is how you make pages feel fast instead of janky.

The step-by-step process a browser follows to turn HTML, CSS and JavaScript into pixels on screen — parsing, building the DOM/CSSOM, layout, paint and composite. Understanding this pipeline helps explain layout shifts, slow first paint, JavaScript-induced delays, and why optimizing the critical rendering path improves perceived performance.

The jaadu builder holds a blueprint and paints a half-finished house.

Think of it like this

Building a house from a blueprint

HTML is the floor plan and CSS is the interior design sheet. The browser first works out what goes where (layout), then paints the walls (paint), then stacks the finished floors together (composite).

Watch it happen

From HTML file to pixels

DOM

CSSOM

Render tree

Layout

Paint

Composite

1/6The browser reads your HTML and builds the DOM, a tree of every element.

The big ideas

What you need to know

HTML becomes the DOM

The browser reads your HTML top to bottom and builds a tree of elements called the DOM.

CSS becomes the CSSOM

Styles are parsed into their own tree. The browser needs both trees before it can draw anything.

Layout, then paint

Layout works out the size and position of every box. Paint fills in colours, text and images.

Some files block the page

CSS in the head and scripts without defer make the browser wait, so the first paint shows up later.

See it in code

Walk through the code

html

1<head>2  <!-- CSS blocks rendering, so keep it small -->3  <link rel="stylesheet" href="styles.css" />4 5  <!-- defer: download now, run after the HTML is parsed -->6  <script src="app.js" defer></script>7</head>

1/2This stylesheet blocks rendering: the browser waits for it before drawing anything.

Without defer, the browser stops building the page to download and run app.js. With defer, the page keeps rendering while the script downloads.

Save yourself the pain

Common mistakes

Oops

Putting big script tags in the head without defer or async.

Do this instead

Add defer (or move scripts to the end of body) so the browser can show content first.

Oops

Animating width, height or top, which redoes layout on every frame.

Do this instead

Animate transform and opacity instead. They skip layout and paint, so animations stay smooth.

Your mission

Watch the pipeline live

~15 min

Quick check

Which of these animations is the smoothest for the browser?

Go deeper

1Read about the Critical Rendering Path on web.dev. Then apply the idea in a small example so the theory becomes practical.
2Open Chrome DevTools' Performance tab and record a page load. Inspect at least one real example and note what each important field or stage represents.
3Learn why render-blocking CSS/JS slows down first paint.