How Browsers Work

Your browser is doing something extraordinary every time you open a web page — understanding it makes you a better developer from day one.

What Is a Browser?

A browser (Chrome, Firefox, Safari, Edge) is a program that does two things:

  1. Fetches files from the internet (or your local computer)
  2. Renders those files — turns the raw code into something visual you can see and click

The word "render" just means "draw on screen." When you type a URL and press Enter, the browser goes and fetches a bunch of files, then reads them and draws the page. That process happens in milliseconds, but there are several distinct steps involved.

Step 1: You Type a URL

A URL (Uniform Resource Locator) is just an address. Like a postal address tells a delivery van where to go, a URL tells the browser where to find a file on the internet.

https://www.example.com/about.html
  • https:// — the protocol. How the browser and server should talk to each other. HTTPS is the secure version.
  • www.example.com — the domain name. This gets looked up and translated into an IP address — an actual numerical location on the internet.
  • /about.html — the path. Which specific file on that server you want.

Step 2: DNS Lookup

Computers don't understand domain names like example.com — they understand numbers like 93.184.216.34. The Domain Name System (DNS) is essentially the internet's phone book: it translates the human-friendly name into the numerical IP address the computer actually needs.

This lookup happens so fast you never notice it, but it's a real network request your computer makes before anything else can happen.

📖 Analogy: DNS is a phone book

Imagine you want to call a restaurant but you only know its name, not the number. You look it up in a phone book (or Google it). The phone book translates "Bella Italia Restaurant" into "+44 20 1234 5678". DNS does exactly this — translates "google.com" into "142.250.200.46".

Step 3: The Server Sends Files

Once the browser has the IP address, it connects to that server and asks for the file. The server sends back the HTML file. The browser then reads that HTML, finds any references to CSS files, JavaScript files, images, and fonts, and sends more requests to fetch all of those too.

A single modern web page can involve dozens or even hundreds of separate file requests happening one after another (or in parallel). The browser coordinates all of this for you automatically.

Step 4: Parsing HTML — Building the DOM

Now the browser has the HTML file. It reads through it from top to bottom and builds a mental model of the page called the DOM — the Document Object Model.

Think of the DOM as a family tree. The <html> element is the great-grandparent. <head> and <body> are its children. Inside <body> are paragraphs, headings, images — all as children and siblings in the tree.

html
├── head
│   └── title
└── body
    ├── h1
    ├── p
    └── p

This tree structure is what the browser actually works with. When JavaScript later wants to change a heading's text, it reaches into this tree and changes the h1 node. When CSS wants to style all paragraphs, it finds all the p nodes in the tree.

📌 DOM vs HTML source

The DOM is not the same as your HTML file. The browser can modify the DOM after it's built (JavaScript does this constantly), which means the page you see can look completely different from the original HTML file. You can always inspect the live DOM using your browser's DevTools (right-click → Inspect).

Step 5: Parsing CSS — Building the CSSOM

While building the DOM, the browser also processes all CSS files and creates a parallel structure called the CSSOM (CSS Object Model). This is a tree of all the style rules and which elements they apply to.

The browser has to wait until it has both the DOM and the CSSOM before it can draw anything, because a CSS rule like "make all paragraphs blue" changes how every paragraph looks. You can't render a paragraph until you know what colour it's supposed to be.

Step 6: The Render Tree

The browser merges the DOM and the CSSOM into a Render Tree. This is a new structure that only contains elements that will actually be visible on screen. Elements hidden with CSS (display: none) or elements in the <head> are excluded.

Each node in the render tree knows both what it is (a paragraph, a heading) and how it should look (font size, color, width).

Step 7: Layout (Reflow)

Next, the browser calculates exactly where on the screen each element goes and how big it is. This step is called Layout (or sometimes Reflow). The browser works out: "This heading is 760px wide and 48px tall, positioned 120px from the top of the page. The paragraph beneath it starts at 176px from the top…" and so on for every element.

If you resize the browser window, Layout runs again — which is why responsive design is a real performance consideration.

Step 8: Painting

Once the browser knows what everything looks like and where it goes, it can actually draw pixels on screen. This is called Painting. Text is drawn, backgrounds are filled in, borders are stroked, shadows are rendered.

Step 9: Compositing

Modern browsers split a page into layers (similar to layers in Photoshop). Compositing is the final step: assembling all the layers into the final image you see on screen. This is handled by the graphics card (GPU) for speed.

Why Should a Beginner Care About All This?

Understanding the pipeline makes practical advice make sense:

  • Why do developers put <script> tags at the bottom of the page or use defer? Because JavaScript can block HTML parsing — putting scripts at the end or deferring them lets the page render before the JS loads.
  • Why does a large CSS file slow down a page? Because the browser can't render anything until it has processed all CSS.
  • Why does JavaScript's document.getElementById() work? Because the DOM is a real data structure in memory that JavaScript can query and modify.
  • Why does changing styles with JavaScript feel slow sometimes? Because changing certain CSS properties forces the browser to re-run Layout, which is expensive.

Browser DevTools: Your New Best Friend

Every modern browser has built-in DevTools that let you inspect the DOM, see CSS rules, watch network requests, run JavaScript, and profile performance. You'll use these constantly throughout this course.

To open DevTools:

  • Windows / Linux: Press F12, or Ctrl + Shift + I
  • Mac: Press Cmd + Option + I
  • Any browser: Right-click anywhere on a page → "Inspect"

The Elements tab shows you the live DOM. The Console tab lets you run JavaScript. The Network tab shows every file the browser requested. Spend 10 minutes clicking around — it's the most valuable habit you can develop as a web developer.

💡 Edit a live page in DevTools

In the Elements tab, you can double-click on any HTML element and edit it. Changes show up on screen immediately. This only changes what's in your browser — refreshing the page resets everything. But it's an incredible way to experiment and learn what HTML and CSS do.

Interview Questions

What is the DOM?

The Document Object Model — a tree structure the browser builds from HTML that represents every element on the page. JavaScript interacts with the DOM to read or change the page dynamically.

What is the difference between the DOM and the HTML source file?

The HTML source is the original file on disk. The DOM is the browser's live, in-memory representation of that file after parsing. JavaScript can modify the DOM after load, so the two can differ significantly.

Why does the browser need CSS before it can render anything?

Because CSS determines how elements look — their size, colour, and position. The browser builds the CSSOM from CSS, merges it with the DOM into a Render Tree, then calculates layout. Without CSS, it can't know what to draw or where.

✏️ Exercise

Open any web page in Chrome or Firefox. Open DevTools (F12). Click the Elements tab. Expand a few elements in the DOM tree. Notice how it matches the HTML structure you've learned about. Then try the Network tab — reload the page and watch all the file requests come in. Count how many there are.

🧠 Quiz

1. What does DNS do?

It translates human-readable domain names (like google.com) into numerical IP addresses that computers use to locate servers on the internet.

2. In what order does the browser build the DOM and CSSOM?

It builds them in parallel as it receives the HTML and CSS files. But it cannot create the Render Tree (and therefore cannot paint anything) until both are complete.

3. What keyboard shortcut opens DevTools in most browsers?

F12 on Windows/Linux, or Cmd + Option + I on Mac. You can also right-click and choose "Inspect".

🚀 Mini Challenge

Open DevTools on this very page. Go to the Network tab and reload. Find the HTML file in the list of requests and click it. Look at the "Preview" or "Response" tab — you're seeing the raw HTML the server sent. Now look at the Elements tab and compare it to the source. Can you spot any differences? (Hint: the script at the bottom adds elements dynamically.)

Summary

  • A browser fetches files and renders them into a visual page.
  • A URL has three parts: protocol, domain, and path.
  • DNS translates domain names into IP addresses.
  • The browser builds a DOM from HTML and a CSSOM from CSS.
  • These merge into a Render Tree → Layout → Paint → Composite.
  • DevTools lets you inspect every step of this process in real time.

Related Topics