DEV Community

Cover image for What Really Happens When You Type a URL and Press Enter?
Md Abu Musa
Md Abu Musa

Posted on

What Really Happens When You Type a URL and Press Enter?

Have you ever wondered what actually happens when you type https://example.com into your browser's address bar and press Enter?

At first glance, it seems like a simple operation. You enter a URL, press Enter, wait a few milliseconds, and a webpage appears.

But behind this seemingly simple action, an incredible amount of work happens across multiple layers of the internet.

Your browser communicates with DNS servers, establishes network connections, performs TLS encryption, sends HTTP requests, interacts with web servers, executes backend logic, retrieves data from databases, and finally renders the response into a fully functional webpage.

Let's break down the entire journey step by step.

1. You Enter a URL

Everything starts when you type a URL into your browser.

For example:

https://www.example.com/products

A URL (Uniform Resource Locator) identifies a resource available on the internet.

Let's break it down:

Component Value Purpose
Protocol https Defines how communication happens
Domain www.example.com Identifies the destination website
Path /products Identifies the requested resource

Once you press Enter, the browser begins processing the URL.

Before making a network request, it may also check whether the URL is valid, whether the resource is already available in browser cache, and whether a service worker can handle the request.

If a network request is necessary, the next important step is DNS resolution.

2. DNS Resolution: Finding the Server's IP Address

Computers communicate with each other using IP addresses, not domain names.

For example, humans can easily remember:

www.example.com

But computers need an IP address such as:

93.184.216.34

So, how does your browser find the IP address associated with a domain name?

That's where DNS (Domain Name System) comes in.

DNS works like the internet's phonebook.

When the browser needs an IP address, the operating system and DNS resolver may check several caches:

  1. Browser DNS cache.
  2. Operating system DNS cache.
  3. Local network or router cache.
  4. Recursive DNS resolver cache.

If the answer is not cached, the recursive resolver may query the DNS hierarchy:

  • Root DNS server: Directs the resolver toward the appropriate TLD servers.
  • TLD DNS server: Provides information about the domain's authoritative DNS servers.
  • Authoritative DNS server: Returns the actual DNS record, such as an A or AAAA record.

For example:

www.example.com → 93.184.216.34

Now the browser knows where to send the request.

Important: DNS does not necessarily perform a complete lookup every time you visit a website. Cached DNS records can significantly reduce resolution time.

3. Establishing a Connection: TCP or QUIC

Now that the browser knows the server's IP address, it needs to establish a connection.

The connection process depends on which HTTP version is being used.

For HTTP/1.1 and HTTP/2: TCP

Traditionally, browsers use TCP (Transmission Control Protocol) to establish a reliable connection.

TCP uses a process called the Three-Way Handshake.

The process involves three steps:

  1. SYN: The client asks the server to establish a connection.
  2. SYN-ACK: The server acknowledges the request and responds.
  3. ACK: The client acknowledges the server's response.

Once these three steps are completed, the TCP connection is established.

For HTTP/3: QUIC

HTTP/3 uses QUIC instead of TCP.

QUIC runs over UDP and integrates transport security through TLS 1.3.

It reduces connection-establishment overhead and supports independent streams, helping avoid some transport-level blocking problems associated with TCP.

The browser and server negotiate which HTTP version to use through mechanisms such as ALPN.

4. TLS Handshake: Establishing a Secure Connection

If you entered an HTTPS URL, the browser needs to establish a secure communication channel.

This is where TLS (Transport Layer Security) comes in.

TLS protects communication between the client and server through encryption and authentication.

During a typical TLS 1.3 handshake:

  1. Client Hello: The browser sends supported TLS versions, cryptographic parameters, and key exchange information.
  2. Server Hello: The server selects compatible parameters and responds with its key exchange information.
  3. Certificate Verification: The browser verifies the server's certificate, including its trust chain and hostname.
  4. Key Establishment: Both parties derive shared session keys.
  5. Secure Communication: Subsequent application data is encrypted.

Now the browser and server can communicate securely.

One important detail: TLS 1.3 normally establishes a secure connection in one round trip after the transport connection is established. QUIC integrates these processes, reducing additional round trips.

5. Sending the HTTP Request

The connection is ready.

Now the browser can send an HTTP request to the server.

For example:

GET /products HTTP/1.1
Host: www.example.com
Accept: text/html
User-Agent: Mozilla/5.0
Accept-Encoding: gzip, br
Enter fullscreen mode Exit fullscreen mode

This request tells the server that the client wants to retrieve the /products resource.

An HTTP request generally contains:

  • HTTP Method: GET, POST, PUT, PATCH, DELETE, etc.
  • URL Path: The requested resource.
  • Headers: Additional information about the request.
  • Body: Optional data sent with the request.

For a simple GET request, there is usually no request body.

The server receives the request and starts processing it.

6. Server-Side Processing: What Happens Behind the Scenes?

This is where things become particularly interesting from a backend engineering perspective.

The request doesn't necessarily reach your application directly.

In a typical production architecture, it may pass through several infrastructure components.

For example:

Client → CDN → Load Balancer → Reverse Proxy → Application Server

Let's understand each component.

CDN (Content Delivery Network)

A CDN may receive the request first.

If the requested resource is already available in the CDN cache, it can return the response without contacting the origin server.

This reduces latency and decreases the workload on the backend infrastructure.

Load Balancer

If the request needs to reach the origin infrastructure, a load balancer distributes incoming requests across multiple application servers.

For example:

  • Server A
  • Server B
  • Server C

The load balancer selects an appropriate healthy server based on its routing algorithm and configuration.

Reverse Proxy

A reverse proxy, such as Nginx, receives the incoming request and forwards it to the appropriate application server.

It can also handle:

  • SSL/TLS termination.
  • Request routing.
  • Compression.
  • Static file serving.
  • Rate limiting.
  • Connection management.

Application Server

Now the request reaches the backend application.

For example, imagine your application is built with Laravel.

The request may follow this execution path:

  1. Laravel receives the HTTP request.
  2. The request passes through global middleware.
  3. The router identifies the matching route.
  4. Route-specific middleware executes.
  5. The controller handles the request.
  6. Business logic is executed.
  7. Models and services interact with external systems or databases.
  8. The application generates an HTTP response.

For example:

Route::get('/products', [ProductController::class, 'index']);
Enter fullscreen mode Exit fullscreen mode

The controller might look like this:

class ProductController extends Controller
{
    public function index()
    {
        $products = Product::query()
            ->where('is_active', true)
            ->get();

        return response()->json([
            'data' => $products,
        ]);
    }
}
Enter fullscreen mode Exit fullscreen mode

The application retrieves the required products and prepares the response.

7. Database Interaction: Retrieving the Data

In many applications, backend processing requires retrieving information from a database.

For example, the application may execute:

SELECT *
FROM products
WHERE is_active = 1;
Enter fullscreen mode Exit fullscreen mode

The database engine processes the query, accesses the required indexes or data pages, and returns the matching records.

However, databases are not always the first place an application looks for information.

A typical application may use multiple caching layers:

  • Application-level cache.
  • Redis or Memcached.
  • Database buffer pool.
  • Operating system page cache.

For example, if product information is already available in Redis, the application may retrieve it without executing a database query.

Otherwise, it queries the primary database.

After retrieving the data, the application processes it and prepares the HTTP response.

8. The Server Sends an HTTP Response

Once the backend finishes processing the request, it sends an HTTP response to the browser.

For example:

HTTP/1.1 200 OK
Content-Type: application/json
Cache-Control: public, max-age=3600

{
    "data": [
        {
            "id": 1,
            "name": "Laptop",
            "price": 850
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

An HTTP response contains three major components:

  1. Status Code: Indicates the result of the request.
  2. Headers: Provide additional information about the response.
  3. Body: Contains the actual response data, if applicable.

Some common HTTP status codes include:

Status Code Meaning
200 OK
201 Created
301 Moved Permanently
302 Found
304 Not Modified
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
500 Internal Server Error
502 Bad Gateway
503 Service Unavailable

The response travels back through the network to the browser.

9. Browser Rendering: Turning HTML into a Webpage

Receiving the response doesn't mean the browser has finished its job.

The browser now needs to convert the received resources into something humans can see and interact with.

This process is called browser rendering.

For a typical HTML webpage, the browser performs several important operations.

Step 1: Parse HTML and Build the DOM

The browser reads the HTML document and converts its elements into a tree-like structure called the DOM (Document Object Model).

For example:

<html>
  <body>
    <h1>Hello World</h1>
    <p>Welcome to my website.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The browser creates a DOM tree representing these elements.

Step 2: Parse CSS and Build the CSSOM

The browser downloads and processes CSS files.

CSS defines how HTML elements should look.

The browser converts CSS rules into another structure called the CSSOM (CSS Object Model).

Step 3: Create the Render Tree

The browser combines the DOM and CSSOM to construct the render tree.

This tree contains the visible elements and their computed styles.

For example, elements hidden with display: none are excluded from the render tree.

Step 4: Layout

The browser calculates the position and dimensions of elements.

It determines:

  • Element width and height.
  • Position on the screen.
  • Margins and padding.
  • Layout relationships.
  • Text positioning.

This process is also known as reflow.

Step 5: Paint

The browser determines how individual visual elements should be drawn.

It paints text, colors, borders, backgrounds, shadows, and other visual properties.

Step 6: Compositing

Finally, the browser combines the relevant layers into the final screen output.

Depending on the page, some rendering operations can be accelerated using the GPU.

At this point, the webpage becomes visible to the user.

10. JavaScript Execution and Additional Network Requests

There is one more important part of modern web applications.

Webpages are not always static HTML documents.

Modern applications frequently depend on JavaScript to provide interactive functionality.

The browser downloads JavaScript files, parses them, compiles and executes the code, and responds to user interactions.

JavaScript may also initiate additional HTTP requests using:

  • Fetch API.
  • XMLHttpRequest.
  • WebSockets.
  • EventSource.

For example, a React or Next.js application may request product information from a Laravel API after the initial page loads.

The browser receives the API response and updates the UI accordingly.

This means the complete page-loading process can involve dozens or even hundreds of additional network requests.

Also, HTML parsing, CSS processing, JavaScript execution, and rendering can overlap. The browser doesn't necessarily complete every operation sequentially.

Putting Everything Together

Let's visualize the complete journey.

        USER
         |
         | Types URL and presses Enter
         v
       BROWSER
         |
         |-- Check browser cache / service worker
         |
         v
    DNS RESOLUTION
         |
         |-- Find server IP address
         |
         v
  CONNECTION ESTABLISHMENT
         |
         |-- TCP (HTTP/1.1 or HTTP/2)
         |-- QUIC (HTTP/3)
         |
         v
    TLS HANDSHAKE
         |
         |-- Verify certificate
         |-- Establish encryption keys
         |
         v
     HTTP REQUEST
         |
         v
        CDN
         |
         |-- Cache hit? Return response
         |
         v
   LOAD BALANCER
         |
         v
    REVERSE PROXY
         |
         v
  APPLICATION SERVER
         |
         |-- Routing
         |-- Middleware
         |-- Business Logic
         |
         v
       CACHE
         |
         |-- Cache hit? Return data
         |-- Cache miss? Query database
         |
         v
      DATABASE
         |
         v
   HTTP RESPONSE
         |
         v
       BROWSER
         |
         |-- Parse HTML
         |-- Build DOM and CSSOM
         |-- Build Render Tree
         |-- Layout
         |-- Paint
         |-- Composite
         |-- Execute JavaScript
         |
         v
    WEBPAGE DISPLAYED
Enter fullscreen mode Exit fullscreen mode

Final Thoughts

Typing a URL and pressing Enter looks like a simple user interaction, but it triggers a sophisticated sequence of operations involving networking, security, distributed systems, backend architecture, databases, and browser internals.

Understanding this process is valuable for every software engineer, especially backend and full-stack developers.

It helps us understand:

  • Why DNS resolution affects application latency.
  • Why TCP, QUIC, and TLS matter for network performance.
  • How CDNs and caching reduce server workload.
  • How load balancers distribute traffic.
  • How reverse proxies communicate with application servers.
  • Why database queries can become performance bottlenecks.
  • How browsers transform HTML, CSS, and JavaScript into a webpage.

The next time you press Enter after typing a URL, remember: you're not simply opening a website. You're initiating a coordinated journey across the entire internet.

And that is what really happens behind the scenes.

Top comments (0)