DEV Community

Cover image for You Press Enter After Typing a URL. Here's Everything That Happens Next.
Ashitosh Lavhate
Ashitosh Lavhate

Posted on

You Press Enter After Typing a URL. Here's Everything That Happens Next.

#browser #logic #web

You type:

https://example.com
Enter fullscreen mode Exit fullscreen mode

Press Enter.

A few milliseconds later, the website appears.

Simple, right?

Not really. πŸ˜„

Behind that single Enter key is a chain of networking, security, server-side processing, and browser rendering.

Here's what actually happens.

1. The Browser Checks: "Do I Already Know This?"

Before asking the internet anything, your browser checks whether it already has useful information cached.

It may check:

  • Browser cache
  • Operating system DNS cache
  • Router cache

If the IP address is already available, it can skip a DNS lookup.

If not, it's time to ask DNS.

2. DNS Turns the Domain Into an IP Address

Humans use names like:

example.com
Enter fullscreen mode Exit fullscreen mode

Computers need an IP address.

DNS acts like the internet's phonebook:

example.com β†’ 93.184.216.34
Enter fullscreen mode Exit fullscreen mode

Your request may involve multiple DNS servers before the correct IP address is found.

Now the browser knows where to send the request.

3. A Connection Is Established

For most HTTPS websites, the browser needs to establish a connection with the server.

Traditionally, this begins with TCP's famous three-way handshake:

Browser β†’ SYN β†’ Server
Browser ← SYN-ACK ← Server
Browser β†’ ACK β†’ Server
Enter fullscreen mode Exit fullscreen mode

Now both sides are ready to communicate reliably.

4. HTTPS Adds a Security Layer

Because we're visiting:

https://example.com
Enter fullscreen mode Exit fullscreen mode

the browser also needs to establish an encrypted connection.

This involves a TLS handshake.

During this process, the browser verifies the server's certificate and both sides establish encryption keys.

After this, the data exchanged between your browser and the server is encrypted.

That's why HTTPS matters.

5. The Browser Sends the HTTP Request

Now the browser can finally ask for the page.

Something conceptually like this:

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

That request travels across the internet to the server.

6. The Server Starts Doing Its Job

What happens next depends on the application.

The request might go through:

Load Balancer
      ↓
Web Server
      ↓
Backend Application
      ↓
Database / Cache / External Services
Enter fullscreen mode Exit fullscreen mode

For example, in a NestJS application:

Request
  ↓
Middleware
  ↓
Guard
  ↓
Controller
  ↓
Service
  ↓
Database
  ↓
Response
Enter fullscreen mode Exit fullscreen mode

The server processes the request and sends something back.

7. The Browser Receives HTML

Imagine the server returns:

<html>
  <head>
    <link rel="stylesheet" href="/styles.css">
  </head>
  <body>
    <h1>Hello World</h1>
    <script src="/app.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The browser doesn't just instantly display this.

It starts parsing it.

8. HTML Becomes the DOM

The browser converts HTML into the DOM (Document Object Model).

Conceptually:

HTML
 ↓
Parser
 ↓
DOM Tree
Enter fullscreen mode Exit fullscreen mode

At the same time, it discovers other resources.

For example:

styles.css
app.js
images
fonts
Enter fullscreen mode Exit fullscreen mode

And begins fetching them.

9. CSS Builds the CSSOM

CSS is also parsed into a structure called the:

CSS Object Model (CSSOM)

So now the browser has:

DOM + CSSOM
Enter fullscreen mode Exit fullscreen mode

These are combined to determine what should actually appear on the screen.

10. The Browser Creates the Page You See

The browser goes through several rendering steps:

DOM + CSSOM
        ↓
    Render Tree
        ↓
      Layout
        ↓
      Paint
        ↓
    Compositing
        ↓
   πŸŽ‰ Website appears
Enter fullscreen mode Exit fullscreen mode

Layout

The browser calculates:

Where should every element go?

Paint

It draws:

Text, colors, borders, shadows, images...

Compositing

Different layers are combined and displayed on your screen.

And finally...

You see the website.

The Crazy Part?

All of this happens after you press one key:

Enter
Enter fullscreen mode Exit fullscreen mode

Your browser may perform DNS resolution, establish secure connections, send requests, receive responses, download resources, execute JavaScript, calculate layouts, and render pixels...

Often in less than a second.

The next time a website takes "just a few seconds" to load, remember:

A lot has to happen before even one pixel appears on your screen.

The Full Journey 

Type URL
   ↓
Check Cache
   ↓
DNS Lookup
   ↓
Connect to Server
   ↓
TLS Handshake
   ↓
HTTP Request
   ↓
Server Processing
   ↓
HTTP Response
   ↓
Parse HTML β†’ DOM
   ↓
Parse CSS β†’ CSSOM
   ↓
Fetch JS / Images / Fonts
   ↓
Render Tree
   ↓
Layout
   ↓
Paint
   ↓
Compositing
   ↓
Website πŸŽ‰
Enter fullscreen mode Exit fullscreen mode

Understanding this flow changed the way I think about web development.

A frontend isn't just "sending an API request."

A backend isn't just "returning JSON."

And a browser isn't just "showing a page."

They're all part of one incredibly coordinated system.

The web feels simple because an absurd amount of complexity is hidden behind one URL.

πŸ’¬ What part of this journey do you find the most interesting: DNS, HTTPS, backend processing, or browser rendering?

Top comments (0)