How Browsers Turn Code into Websites

The idea

A browser is not just a window to the internet. It is a sophisticated piece of software that takes raw code — plain text files containing HTML (HyperText Markup Language), CSS (Cascading Style Sheets), and JavaScript — and turns them into the visual, interactive pages you interact with every day.

Understanding how this works makes you a better developer. When you know what the browser is doing with your code, you write better code.

What a browser actually is

A browser is a program that can read HTML, CSS, and JavaScript files and display them as a visual page. Chrome, Firefox, Safari, and Edge are all browsers. They all follow the same basic rules for how to interpret code, though they sometimes differ in small ways.

At the core of every browser is a rendering engine. This is the software that does the actual work of turning code into pixels on your screen. Chrome and Edge use a rendering engine called Blink. Firefox uses one called Gecko. Safari uses WebKit.

The rendering process

When your browser receives an HTML file from a server, it goes through a specific sequence of steps to display it.

Step 1: Parsing HTML

The browser reads the HTML file from top to bottom and builds a structure called the DOM (Document Object Model). The DOM is a tree-like representation of every element on the page. Think of it as the browser's internal map of the page structure.

Step 2: Parsing CSS

The browser reads any CSS files it finds and builds another structure called the CSSOM (CSS Object Model). This is a map of all the styling rules and which elements they apply to.

Step 3: Building the Render Tree

The browser combines the DOM and CSSOM to create the Render Tree. The Render Tree contains only the elements that will actually be visible on the page, along with their computed styles.

Step 4: Layout

The browser calculates the exact position and size of every element on the page. This step is called Layout or Reflow. It answers questions like: How wide is this box? Where does this paragraph start? How much space does this image take up?

Step 5: Painting

The browser converts the layout into actual pixels on your screen. This is called Painting. It draws backgrounds, borders, text, images, and everything else you see.

Step 6: Compositing

For complex pages with animations or overlapping elements, the browser may split the page into layers and combine them. This is called Compositing.

JavaScript changes the page

HTML and CSS are static. Once the browser has built the DOM and painted the page, JavaScript can come in and change things. JavaScript can add new elements, remove existing ones, change styles, respond to clicks and keyboard input, and fetch new data from servers without reloading the page.

This is how modern web applications work. When you click a button and something changes on the page without a full reload, that is JavaScript modifying the DOM (Document Object Model).

Why this matters for you as a developer

Layout and Paint are expensive operations. Every time JavaScript changes something that affects an element's size or position, the browser has to redo Layout and Paint for part of the page. Doing this too frequently causes what developers call jank — visible stuttering or slowness.

Good developers write code that minimises unnecessary layout recalculations. Understanding the rendering pipeline is the first step to writing code that performs well.

Key Takeaways

Browsers use a rendering engine to turn HTML, CSS, and JavaScript into visual pages. The browser builds a DOM (Document Object Model) from HTML and a CSSOM (CSS Object Model) from CSS. These combine into a Render Tree that the browser uses to calculate layout and paint pixels. JavaScript can modify the DOM after the page loads, enabling dynamic and interactive behaviour. Triggering unnecessary layout recalculations hurts performance.