How Do Web Browsers Work? What Happens After You Type a URL
A web browser is an app that fetches web pages and shows them on your screen. When you type a URL, it looks up the number that acts as the server's address. It then connects with encryption and receives the page's ingredients. In most cases, it puts the HTML, CSS and JavaScript together and draws the page within a few seconds.
What you'll learn
- The six steps from typing a URL to seeing the page
- The job each of HTML, CSS and JavaScript does
- Why a page opens faster the second time (caching), and how cookies work
- How browser "engines" differ, and why browsers use so much memory
- The basics of using a browser safely
Prerequisites: none. If you have looked at a web page on a phone or computer, that is enough.
In everyday life
Chrome, Safari, Edge and Firefox are all browsers. When you open a link inside another app, the screen you see also often uses parts of a browser.
The data for a web page is stored on a computer far away. A computer that hands out data when asked is called a "server." The browser's job is to ask the server for the data and turn it into a screen that people can read.
This article follows the path from typing a URL to seeing the page, step by step. The finer details of the network are left to other articles.
From typing a URL to seeing the page
The string of characters that gives the location of a web page is called a URL. It looks like "https://www.example.com/news/". The "https" at the start is the way of communicating. "www.example.com" is the name of the site, and the rest is the location inside the site.
After you enter a URL, the browser goes through six broad steps. To keep things simple, we show only the most common path here.
In step ②, the browser uses the site's name to look up the number used for communication. This number is called an IP address. The system for looking it up is called DNS. "How Does DNS Work?" explains it in detail.
In step ③, the browser first opens a path for communicating with the server. It then agrees with the server on keys for encryption. Today, most sites use HTTPS, which encrypts traffic so it can't be read on the way. These setup steps are covered in "TCP vs UDP: What's the Difference?" and "What Does HTTPS Mean?"
"Please send this page" and "Here it is": the HTTP conversation
Once connected, the browser sends a request: "Please send this page." The server sends back the page's data, labeled with a number that shows the result. The set of rules that defines the form of this conversation is called HTTP.
The three-digit number at the start of the reply is called an HTTP status code. "200" means success. "404" means that page could not be found.
What usually arrives first is the HTML (explained in the next section). The browser reads through it. Each time it finds a note such as "this image is also used," it sends another request. It is common to send dozens of requests for a single page. Ads and videos may come from servers run by other companies. "How Is Data Sent Over the Internet?" explains how the data itself gets delivered.
HTML, CSS and JavaScript: what each ingredient does
The ingredients of a web page are mainly three kinds of text files. International bodies publish the rules for how to write them.
HTML: the content and how it is put together
HTML describes the content of a document and the role of each part. Examples are "this is a heading," "this is a paragraph" and "an image goes here." Roles are shown with tags inside angle brackets. For example, the line below shows that "News" is a heading.
<h1>News</h1>
CSS: setting the look
CSS sets how things look, such as the color and size of text and how items are arranged. The line below says "show headings in blue text."
h1 { color: blue; }
Keeping the content and the look separate makes it easy to switch layouts. For example, the same content can sit in one column on a phone and side by side on a computer.
JavaScript: a program that adds movement
JavaScript is a program that runs on the page. It handles things like what happens when you press a button, or swapping content without reloading the page. The line below is a command that changes the heading's text to "Welcome."
document.querySelector("h1").textContent = "Welcome";
To run faster, the browser translates the most-used parts of JavaScript into CPU instructions while it runs. This way of translating is called JIT compilation. "How Compilers Work" explains how the translation works.
Building the page and drawing it on screen
Once the ingredients arrive, the browser works on drawing the screen. Here we split this into four steps (in reality the steps are finer and run at the same time).
- Sort the HTML into a tree: Parent-child links such as "the page holds a heading and a paragraph, and the paragraph holds a link" become data shaped like a tree.
- Decide the look: The browser applies the CSS rules to each part and decides its color and size.
- Work out positions: Based on the screen width, it decides where to place each part and how big to make it.
- Draw: It turns text and images into sets of dots (pixels) and draws them on the screen. To layer them, it also uses the GPU, a chip that is good at graphics.
The tree-shaped data from step 1 is called the DOM. When JavaScript "changes the heading," it is changing this DOM. When the DOM changes, the browser redoes only as much of steps 2–4 as it needs to.
To make motion look smooth, many screens need to be redrawn about 60 times a second. That works out to about 16.7 ms per redraw (a millisecond, ms, is a thousandth of a second). If JavaScript uses up this time with heavy calculations, scrolling stutters.
Why a page opens faster the second time: the cache
The browser keeps the ingredients it has received on the device for a while. This stored copy is called the "cache." If the copy can be used when you open the page again, the browser saves a trip to the server.
The server says in its reply how long the copy may be used. Before that time runs out, the browser uses the copy without asking the server.
A copy that has expired is not thrown away right away. The browser asks the server, "Has this changed since my version?" If it hasn't, the server sends back only a short reply labeled "304," without the content. Much less data arrives, so the page loads faster.
The browser also remembers the numbers it looked up with DNS, so it can sometimes skip step ②.
Cookies: small notes a site leaves with your browser
Each HTTP exchange stands on its own. On its own, the server can't tell that "the person who just logged in" and "this request" are the same person. So the server attaches a small piece of text data to its reply and has the browser store it.
The next time the browser sends a request to the same site, it automatically sends this data along. This system is called a cookie. Cookies are used to remember things like whether you are logged in and what is in your shopping cart.
First-party and third-party
A cookie left by the site you are viewing is called a first-party cookie. A cookie left by a different company, such as an ad embedded in the page, is called a third-party cookie.
Imagine ads from the same ad company embedded on many sites. The ad company can receive the same cookie on every one of those sites. It can then link the visits and see that the same person viewed a news site and a cooking site. Following people's activity in this way is called "tracking."
How browsers have limited tracking
To prevent this kind of tracking, browsers have limited third-party cookies. In March 2020, Safari blocked all third-party cookies by default. In June 2022, Firefox made a new method the default on desktop: it stores cookies in a separate box for each site. With separate boxes, an ID left on another site does not show up.
In January 2020, Chrome announced a plan to phase out third-party cookies. After repeated delays, it dropped this plan in July 2024. In April 2025, it decided to keep letting users choose whether to block them in the existing settings. By default, Chrome accepts them. It blocks them in Incognito mode, a window that does not keep your history (as of October 2026).
Browser engines: three families inside
The core part of a browser that reads HTML and CSS and builds the screen is called the "browser engine." The outer screens differ from company to company, but the engine is sometimes shared. Three families are widely used today.
| Engine | Main browsers | Main developer |
|---|---|---|
| Blink | Chrome, Edge and others | Google (Chromium, a project whose code anyone can see) |
| WebKit | Safari | Apple |
| Gecko | Firefox | Mozilla |
Blink split off from WebKit in 2013. In January 2020, Microsoft switched Edge's insides to a new version based on Chromium. So Chrome and Edge look different, but they build pages in almost the same way.
On iPhone and iPad, Apple's rules mean that browsers must, as a rule, use WebKit. Chrome for iPhone also usually runs on WebKit inside. The exceptions are the EU and Japan, where laws allow other engines if the browser meets certain conditions. In the EU this applies from iOS 17.4. In Japan it applies from iOS 26.2, under the country's smartphone software competition law (as of October 2026).
Engine differences matter for two reasons. First, the same page may look or behave a little differently depending on the engine. Second, when a weakness is found in one engine, every browser that uses it is affected.
Why browsers use so much memory
A big reason browsers use so much memory is a design that runs pages safely apart from each other. The operating system (OS) manages each running program as a unit called a "process," and lends each one its own memory ("What Is an Operating System?"). Since its launch in 2008, Chrome has put the parts that display pages into separate processes, for example one per tab. If one tab freezes, the other tabs can keep working.
In 2018, a type of attack that exploits a weakness in how CPUs are designed became widely known. This attack is called Spectre. Within the same process, it could let one site peek at another site's data. So from Chrome 67 in 2018, Chrome made it the default on desktop to split processes by site. Firefox also announced a method based on the same idea in 2021.
On top of this, the processes that display pages run with strict limits on what they can do. They cannot touch files or devices directly. This kind of confinement is called a "sandbox." Even if a bad page exploits a weakness in the engine, the damage is more likely to stay inside.
When processes are split, each one needs its own copy of the same parts, so memory use goes up. Browsers use extra memory for stability and safety. When memory runs short, closing tabs you aren't using works well.
The basics of using a browser safely
A browser is an app that runs programs from strangers every day. So weaknesses in its engine are easy entry points for attacks, and fixes are sent out often. Since 2021, Chrome has released a new version every four weeks.
Most browsers get updates automatically. But some, like Chrome on a computer, don't apply them until you restart. When you see an "Update" or "Relaunch" prompt, follow it soon. On a phone, don't turn off updates to the OS or apps. Most iPhone browsers get WebKit fixes through iOS updates.
Add-on programs that give a browser extra features are called "extensions." Some ask for permission to read the content of every page you view. Install them only from the official store. Check that the permissions they ask for fit what they do, and that you can trust the people who made them.
Also watch out for fake sites that look just like real ones. "What Is Phishing?" explains how to spot them and how to protect yourself.
Common myths
Myth: Chrome and Safari on iPhone are completely different browsers inside
In fact, Chrome on iPhone, as a rule, also builds pages with WebKit, the same engine as Safari. What differs is the outer features, such as the screen design and bookmark syncing. Even under the same name, Chrome for computers and Chrome for iPhone use different engines.
Myth: Cookies are dangerous programs that run on their own
In fact, a cookie is a small piece of text data that a server leaves with your browser. It never runs as a program by itself. Cookies also do jobs many sites can't work without, such as keeping you logged in. The things to watch out for are tracking with third-party cookies and theft of the cookies used for logging in.
Myth: In Incognito mode, no one can see what you browse
In fact, what Incognito mode doesn't keep is things like the history and cookies on that device. According to Google's help pages, your browsing may still be visible to others. These include the sites you visit, school or work administrators, and your internet provider. The feature is meant to avoid leaving history for other people who use the same device.
By the numbers
| Item | Number | Notes |
|---|---|---|
| One frame of smooth display | About 16.7 ms | When the screen is redrawn 60 times a second (MDN) |
| Rough size of one cookie | About 4 KB (4,096 bytes) | The size RFC 6265 (2011) asks browsers to handle at least. Real limits are about the same |
| Year Safari blocked all third-party cookies by default | 2020 | Safari 13.1 and iOS 13.4 |
Learn more
- Compare in a table: HTTP/1.1 vs HTTP/2 vs HTTP/3
- Compare in a table: Process vs Thread, Compiler vs Interpreter vs JIT
- Try the numbers: the data transfer time calculator (estimate how long a page takes to arrive)
- Terms for your next step: same-origin policy (the rule that stops one site from reading another site's data), cross-site scripting (XSS) (an attack that exploits a weakness in a site)
- Delivering pages faster: CDN (content delivery network) (a system that keeps copies close to users and serves them from there)