What Happens When You Type a URL in the Browser?

Typing a URL in a browser's address bar and hitting Enter might seem like a simple task, but it triggers a complex sequence of events. This blog will break down these events step-by-step, covering everything from DNS lookup to rendering the final webpage.

User Types a URL and Hits Enter
DNS Lookup
TCP/IP Connection
SSL/TLS Handshake
HTTP Request
Server Processing and Response
Browser Rendering Engine
JavaScript Execution
Additional Resource Loading
Rendering Complete
Conclusion

1. User Types a URL and Hits Enter

When you type a URL (Uniform Resource Locator) in the browser's address bar and press Enter, the browser begins the process of loading the web page. For example, if you type https://www.example.com, the browser needs to:

Resolve the domain name to an IP address.
Establish a connection to the server.
Request the web page.
Render the web page on your screen.

2. DNS Lookup

DNS (Domain Name System) is responsible for translating human-readable domain names into IP addresses that computers can understand. When you enter a URL, the browser first checks its cache to see if it has recently resolved the domain. If not, it performs a DNS lookup.

Steps of DNS Lookup:

Browser Cache: The browser checks if it has recently visited the domain and has the IP address cached.
Operating System Cache: If the browser cache misses, the OS cache is checked.
Router Cache: The request moves to your router, which may have a cached response.
ISP's DNS Server: If the router doesn't have the answer, it queries the ISP's DNS server.
Recursive Search: If all caches miss, the ISP's DNS server initiates a recursive search, querying various DNS servers, starting from the root DNS servers, down to the TLD (Top-Level Domain) servers, and finally the authoritative DNS server for the domain.

3. TCP/IP Connection

With the IP address obtained, the browser now needs to establish a connection to the server. This typically involves a three-step process known as the TCP (Transmission Control Protocol) handshake.

Steps of TCP Handshake:

SYN: The browser sends a SYN (synchronize) packet to the server to initiate the connection.
SYN-ACK: The server responds with a SYN-ACK (synchronize-acknowledge) packet, acknowledging the request.
ACK: The browser sends an ACK (acknowledge) packet back to the server, establishing the connection.

4. SSL/TLS Handshake

If you are connecting to a secure website (https://), an additional SSL/TLS handshake occurs to establish a secure connection.

Steps of SSL/TLS Handshake:

ClientHello: The browser sends a ClientHello message to the server, which includes information about the browser's capabilities and supported encryption algorithms.
ServerHello: The server responds with a ServerHello message, selecting the encryption algorithm and providing its SSL/TLS certificate.
Certificate Verification: The browser verifies the server's certificate against trusted Certificate Authorities (CAs).
Session Keys: Both the browser and server generate session keys to encrypt the data transmitted during the session.

5. HTTP Request

With the connection established, the browser sends an HTTP request to the server. The request includes details like the method (GET, POST), headers, and any additional data.

Example of HTTP GET Request:

GET / HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

6. Server Processing and Response

The server processes the request, fetching the requested resource (e.g., an HTML page). The server then sends an HTTP response back to the browser.

HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Content-Length: 1024
Connection: keep-alive

<!doctype html>
<html>
  <head>
    <title>Example Page</title>
  </head>
  <body>
    <h1>Welcome to Example.com</h1>
  </body>
</html>

7. Browser Rendering Engine

Upon receiving the response, the browser's rendering engine parses the HTML document and builds the DOM (Document Object Model) tree. It also processes CSS (Cascading Style Sheets) and JavaScript files to construct the final rendered web page.

Steps in Rendering:

HTML Parsing: The browser parses the HTML to create the DOM tree.
CSS Parsing: The browser parses CSS to create the CSSOM (CSS Object Model).
Render Tree Construction: The DOM and CSSOM are combined to form the render tree.
Layout: The browser calculates the layout, determining the position and size of elements.
Painting: The browser paints the pixels on the screen, rendering the web page.

8. JavaScript Execution

As the browser parses the HTML, it encounters and executes JavaScript code, which can manipulate the DOM, make asynchronous HTTP requests (AJAX), and interact with the user.

Example:

document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("h1").textContent = "Hello, World!";
});

9. Additional Resource Loading

The initial HTML page often references additional resources such as images, CSS files, JavaScript files, and fonts. The browser makes additional HTTP requests to fetch these resources and integrates them into the page.

10. Rendering Complete

Finally, once all resources are loaded and scripts are executed, the browser completes the rendering process, and the web page is fully interactive and ready for user interaction.

Conclusion

Typing a URL into a browser and pressing Enter sets off a series of intricate processes that involve network communication, security protocols, and complex rendering engines. Understanding these steps not only helps in web development but also in optimizing performance and troubleshooting issues. Each step in this process plays a critical role in delivering the seamless web experience we often take for granted

Table of Contents