What Happens When You Type a URL in Your Browser?
Follow the complete journey of a URL from your keyboard to a loaded web page. Learn how browsers work — DNS, TCP, HTTP requests, rendering — in a clear, beginner-friendly walkthrough.
“What happens when you type a URL in your browser?” is one of the most famous interview questions in software engineering. More importantly, understanding how browsers work gives you a mental model for debugging every web problem you’ll ever encounter.
Step 1: You Press Enter
The browser has the URL: https://kaiko.dev/blog. Let’s trace every step.
Step 2: DNS Lookup
The browser doesn’t know where kaiko.dev is. It checks:
- Its own DNS cache
- The OS DNS cache
- Your ISP’s recursive resolver
- Up the chain to authoritative nameservers
Result: an IP address like 76.76.21.21.
Step 3: TCP Connection
The browser opens a TCP connection to the server at that IP on port 443 (HTTPS). This involves a three-way handshake:
- Client → Server: “SYN” (I want to connect)
- Server → Client: “SYN-ACK” (Acknowledged, I’m ready)
- Client → Server: “ACK” (Great, let’s go)
For HTTPS, a TLS handshake follows to establish encryption.
Step 4: HTTP Request
The browser sends an HTTP GET request:
GET /blog HTTP/1.1
Host: kaiko.dev
Accept: text/html
User-Agent: Chrome/120Step 5: Server Responds
The server receives the request, processes it (runs code, queries a database if needed), and sends back an HTTP response:
HTTP/1.1 200 OK
Content-Type: text/html
Cache-Control: max-age=3600
<!DOCTYPE html>...Step 6: The Browser Renders the Page
The browser receives the HTML and starts parsing:
- HTML is parsed into a DOM tree
- CSS files are fetched, parsed into a CSSOM
- DOM + CSSOM = Render Tree
- Layout — calculate size and position of each element
- Paint — draw pixels to the screen
JavaScript files are downloaded and executed, potentially modifying the DOM and triggering re-renders.
Why This Matters
Understanding this flow explains:
- Why DNS changes take time (caches have TTLs)
- Why HTTPS matters (step 3 encrypts the connection)
- Why large JavaScript files slow page loads (step 6 blocks rendering)
- Why a 404 means the server responded but didn’t find the resource
Conclusion
The next time you hit a slow page or a broken site, walk through these steps. Is it a DNS issue? A slow server response? A large JavaScript bundle? Understanding how browsers work gives you the vocabulary to diagnose and fix problems that would otherwise feel mysterious.
Read next: How HTTP Works
External resource: Web.dev — How Browsers Work
Related Articles
CSS Flexbox in Plain English: A Beginner's Guide
Learn CSS Flexbox with simple, visual explanations. This guide covers display flex, justify-content, align-items, flex-wrap, and practical layouts every developer needs to know.
Environment Variables Explained: Keeping Secrets Out of Code
Learn what environment variables are and why every developer needs them. This guide covers how to use .env files, os.environ in Python, process.env in Node.js, and best practices.
Six ES6 Features Every JavaScript Developer Should Know
Master the most important ES6 JavaScript features including arrow functions, destructuring, template literals, spread operator, modules, and default parameters with examples.