How Web Browsers Work — KS3 Computing Guide

What happens when you type a URL into a browser?

The journey from address bar to visible page involves several distinct stages:

1. URL parsing — the browser breaks the address into its components: protocol (https), domain (www.bbc.co.uk), path (/bitesize), and optional query string.
2. DNS lookup — the browser asks a DNS server to translate the domain name into an IP address (e.g. 151.101.0.81). The result is often cached locally for speed.
3. TCP connection — the browser opens a TCP connection to the server on port 443 (HTTPS) or port 80 (HTTP) using the three-way handshake.
4. TLS handshake — for HTTPS, the browser and server negotiate encryption before any data is sent.
5. HTTP request — the browser sends a GET request asking for the page resource.
6. Server response — the server returns an HTTP response containing status code (200 OK), headers, and the HTML body.
7. Rendering — the browser parses HTML, loads linked CSS and JavaScript files, and builds the page.

What are the main components inside a browser?

The rendering engine is the core technical component. Chrome uses Blink; Firefox uses Gecko; Safari uses WebKit. These differences mean a webpage can (rarely) look slightly different across browsers.

How does the browser turn HTML into a visible page?

The rendering engine follows a multi-step process called the critical rendering path:

1. Parse HTML → build the DOM (Document Object Model) — a tree representing every element on the page (<html>, <body>, <p>, etc.).
2. Parse CSS → build the CSSOM (CSS Object Model) — a tree representing the styles for each element.
3. Combine DOM + CSSOM → build the render tree — only visible elements, each carrying its computed style.
4. Layout → calculate the exact position and size (in pixels) of every element.
5. Paint → draw the pixels to the screen in the correct order.
6. Composite → for pages with multiple layers (fixed navigation bars, overlapping elements), combine layers in the correct order.

JavaScript can modify the DOM or CSSOM at any point, which may force the browser to repeat layout and paint steps — one reason poorly written JavaScript makes pages feel sluggish.

What is the difference between HTTP and HTTPS?

HTTP sends data as plain text — anyone on the same network can read it (a risk in public Wi-Fi). HTTPS wraps the HTTP traffic in TLS encryption so that only the browser and the server can read the contents. All reputable websites now use HTTPS.

What are cookies and how does the browser use them?

A cookie is a small piece of text that a web server asks the browser to store and send back with future requests to the same domain. Cookies enable:

• Session management — keeping you logged in as you navigate a website.
• Personalisation — remembering your language preference or shopping basket.
• Analytics — tracking which pages you visit (with your consent under GDPR).

Cookies are not programs and cannot run code. They simply store key-value pairs, such as session_id=abc123. The browser attaches them to every relevant request automatically.

Why do browsers cache content?

Caching stores copies of downloaded files (images, CSS, JavaScript) locally so they do not need to be downloaded again on your next visit. The server instructs the browser how long to cache a file via the Cache-Control header. Benefits:

• Faster page loads on repeat visits.
• Less bandwidth used.
• Less load on the server.

When a developer updates a file (e.g. a logo), they may need to change the file's URL or version number so browsers fetch the new version rather than using the cached old one.

Frequently asked questions

What is a rendering engine and why do different browsers have different ones?

A rendering engine interprets HTML and CSS and turns them into pixels. Different companies developed their own engines independently: Apple's WebKit originated in the early 2000s; Google forked it into Blink when they diverged from Apple's development. Each engine aims to follow the same web standards (set by the W3C), so pages should look identical in theory. In practice, minor differences remain, which is why web developers test their sites across multiple browsers.

Why does a page sometimes look broken after I clear my cache?

A cleared cache forces the browser to download everything fresh. If the page relies on files that are temporarily unavailable, or if there is a bug in a recently deployed update, the problem becomes visible. Usually the page fixes itself after a full refresh (Ctrl+Shift+R / Cmd+Shift+R), which bypasses the cache. In most cases, the page looked fine before because the browser was serving a cached version that predated the problem.

How does the browser know a website is safe?

HTTPS sites present a TLS certificate signed by a trusted Certificate Authority (CA). Your browser ships with a list of trusted CAs. When it connects to a site, it verifies: (1) the certificate is signed by a trusted CA, (2) the certificate names the domain you are visiting, and (3) the certificate has not expired. If any check fails, the browser shows a security warning. This process prevents impersonation attacks.

What does "port 80" and "port 443" mean?

Ports are numbered channels on a network connection. Think of an IP address as a building's street address and port numbers as flat numbers — they direct traffic to the correct service inside the same server. Port 80 is the standard HTTP port; port 443 is the standard HTTPS port. When you type a URL, the browser connects to the correct port automatically. A server might also run an SSH service on port 22, an email server on port 25, and a database on port 5432 — all on the same machine.

---

Want to understand what is happening inside your browser as you study online? Professor Turing at aitutors.me can walk you through the web from URL to pixel.