DEV Community

Cover image for What Happens When You Type a URL in Your Browser?
Libin Tom Baby
Libin Tom Baby

Posted on

What Happens When You Type a URL in Your Browser?

#webrequest #server #url #frontend

A behind-the-scenes walkthrough from address bar to rendered webpage

🧭 Introduction

It’s something we do dozens of times a day—type a website address into the browser and expect the page to load instantly. But under the hood, this simple action triggers a complex, multi-layered process involving networking, security, server logic, and rendering engines.

This post breaks down the journey step by step, from the moment you hit Enter to the moment the page appears on your screen. Whether you're a curious developer, a performance optimizer, or just someone who wants to understand the web better, this guide will give you a clear picture of how it all works.

1️⃣ URL Parsing and Protocol Identification

When you type a URL like https://example.com:

  • The browser parses the address into components: protocol (https), domain (example.com), path (/), query parameters, and fragments.
  • It determines which protocol to use (usually HTTP or HTTPS) and prepares to initiate a network request.

2️⃣ DNS Resolution

Before the browser can connect to a server, it needs the server’s IP address. It does this by querying a DNS (Domain Name System) server:

  • First, it checks the local DNS cache.
  • If not found, it asks the operating system, which may query a DNS resolver (often provided by your ISP or a public DNS like Google’s 8.8.8.8).
  • The DNS server responds with the IP address of the domain (e.g., 93.184.216.34).

This step is like looking up a phone number in a contact list.

3️⃣ TCP Connection and TLS Handshake

With the IP address in hand:

  • The browser initiates a TCP connection using a three-way handshake.
  • If the protocol is HTTPS, a TLS (Transport Layer Security) handshake follows to establish an encrypted channel.

This ensures that all data exchanged between your browser and the server is secure and private.

4️⃣ HTTP Request Sent

Once the connection is established, the browser sends an HTTP request to the server. Typically, this is a GET request asking for the homepage or a specific resource.

Example:

GET / HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Enter fullscreen mode Exit fullscreen mode

The request may include headers, cookies, and other metadata.

5️⃣ Server Response

The server receives the request, processes it, and sends back an HTTP response:

  • Status code (e.g., 200 OK, 404 Not Found)
  • Headers (e.g., content type, caching rules)
  • Body (HTML, JSON, or other content)

If the server uses dynamic rendering (e.g., PHP, Node.js, ASP.NET), it may generate the HTML on the fly. Otherwise, it might serve static files directly.

6️⃣ HTML Parsing and DOM Construction

The browser begins parsing the HTML:

  • It builds the DOM (Document Object Model), a tree-like structure representing the page’s content.
  • It encounters references to external resources like CSS, JavaScript, and images, which are fetched asynchronously.

7️⃣ CSSOM and Render Tree

  • CSS files are parsed into the CSSOM (CSS Object Model).
  • The DOM and CSSOM are combined to form the render tree.
  • The browser calculates layout (positions and sizes) and paints pixels to the screen.

This is where visual styling and layout come together.

8️⃣ JavaScript Execution

JavaScript files are downloaded, parsed, and executed:

  • Scripts may modify the DOM (e.g., adding elements, handling events).
  • The browser may reflow or repaint parts of the page based on these changes.

Modern browsers optimize this process using techniques like Just-In-Time (JIT) compilation and async loading.

9️⃣ Resource Fetching

Images, fonts, videos, and other assets are fetched in parallel:

  • The browser uses caching to avoid redundant downloads.
  • Compression (e.g., GZIP) and CDNs (Content Delivery Networks) improve speed.

🔟 Final Rendering and Interactivity

Once all resources are loaded and scripts executed:

  • The browser paints the final layout to the screen.
  • Event listeners are activated, and the page becomes interactive.

From the user’s perspective, the page is now “ready”—but behind the scenes, dozens of systems have worked in harmony to make it happen.

✅ Summary: From Address Bar to Page Render

Step Description
1. URL Parsing Breaks down the address
2. DNS Lookup Resolves domain to IP
3. TCP/TLS Establishes secure connection
4. HTTP Request Asks for page content
5. Server Response Sends HTML and assets
6. HTML Parsing Builds DOM
7. CSSOM + Render Tree Styles and layout
8. JS Execution Adds interactivity
9. Resource Fetching Loads images, fonts, etc.
10. Rendering Displays the page

🧠 Final Thoughts

Understanding this flow isn’t just useful for debugging—it’s foundational for performance optimization, security hardening, and building better user experiences. Whether you're working on frontend, backend, or full-stack systems, knowing what happens between the browser and the server helps you write smarter, faster, and more reliable code.

Top comments (0)