DEV Community

Arnav Sharma
Arnav Sharma

Posted on

What Happens When You Type a URL in the Browser?

#webdev #learning

Have you ever wondered what really happens when you type www.google.com into your browser and hit Enter?

It feels instant — but under the hood, your browser, operating system, and the internet work together through a fascinating sequence of steps. Let’s break it down step by step.

1. You Enter the URL

When you type a URL (Uniform Resource Locator) like https://example.com, the browser starts interpreting it:

  • Protocol: https:// tells the browser how to communicate (secure HTTP here).
  • Domain Name: example.com needs to be translated into an IP address.
  • Path & Query: /products?id=123 tells the server which resource you want.

2. Browser Checks Cache

Before making any request, the browser looks for shortcuts:

  • Browser cache → Has this site been visited before?
  • Operating System cache → Stored DNS lookups.
  • Router cache → Local network remembers common addresses.
  • ISP cache → Your internet provider may store DNS results.

If the IP address for the domain is already cached, the browser skips DNS lookup. Otherwise…

3. DNS Resolution (Domain → IP)

Your browser needs to know the actual server address (like 142.250.182.14 for Google). This is where DNS (Domain Name System) comes in:

  1. Ask the local DNS resolver (usually at your ISP).
  2. If not found, it queries the Root DNS servers.
  3. Then moves to the Top-Level Domain (TLD) servers (like .com).
  4. Finally, it reaches the Authoritative DNS server that knows the exact IP of example.com.

Result: The domain name is translated into an IP address.

4. Browser Establishes a Connection (TCP Handshake)

Now that we have the IP, the browser establishes a connection using TCP (Transmission Control Protocol):

  • SYN: Browser says hello.
  • SYN-ACK: Server replies hello.
  • ACK: Browser confirms.

This is called the 3-way handshake. It ensures both browser and server are ready to communicate.

5. Secure Connection (TLS Handshake for HTTPS)

Since most sites use HTTPS, another step kicks in:

  • Browser and server agree on encryption protocols.
  • They exchange certificates to verify trust (via Certificate Authorities).
  • A secure encrypted channel is created.

This ensures data you send/receive is private.

6. Browser Sends HTTP Request

Finally, the browser sends a request, for example:

GET / HTTP/1.1
Host: example.com
User-Agent: Chrome/120.0
Accept: text/html
Enter fullscreen mode Exit fullscreen mode

This tells the server: “Hey, I want the homepage of example.com.”

7. Server Processes the Request

On the server side:

  • The request reaches the web server software (like Nginx, Apache, Node.js).
  • The server may fetch data from databases, run application logic, or return a static file.
  • The server responds with an HTTP response, e.g.: 
HTTP/1.1 200 OK
Content-Type: text/html
Enter fullscreen mode Exit fullscreen mode

…followed by the HTML of the page.

8. Browser Receives the Response

The browser now gets the raw HTML. But it’s just the beginning:

  1. Parse HTML → Build the DOM (Document Object Model).
  2. Parse CSS → Build the CSSOM (CSS Object Model).
  3. Run JavaScript → Modify DOM/CSSOM.
  4. Construct Render Tree → Combine DOM + CSSOM.
  5. Layout & Paint → Calculate positions and paint pixels on screen.

9. Loading Extra Resources

The HTML often contains references to:

  • CSS files
  • JavaScript files
  • Images, fonts, videos

Each of these triggers more HTTP requests, which go through similar DNS + TCP + TLS steps (unless cached).

10. You See the Page

At last, all resources are downloaded, parsed, and rendered. The page becomes interactive as JavaScript finishes execution.

From typing a URL to seeing a fully loaded website, this entire process usually happens in milliseconds.

⚡ TL;DR (Quick Recap)

When you type a URL:

  1. Browser checks cache
  2. DNS resolves domain → IP
  3. TCP handshake
  4. TLS handshake (HTTPS)
  5. Browser sends HTTP request
  6. Server processes request
  7. Browser receives response
  8. Browser parses + renders page
  9. Additional resources load
  10. Page displayed to you

🌐 Why Should You Care?

Understanding this flow helps developers:

  • Debug performance bottlenecks
  • Improve website loading speed
  • Secure web apps with HTTPS
  • Appreciate the hidden complexity behind a “simple” click

👉 Next time you hit Enter in your browser, remember: an entire orchestra of systems plays in perfect sync to deliver that page in the blink of an eye.

Top comments (0)