When you type a URL into a web browser and press Enter, a complex series of events unfolds to retrieve and display the requested web page. Here's a breakdown of the typical process:
1. URL Parsing
The browser first parses the URL (Uniform Resource Locator) to understand its different components:
* Protocol: (e.g., http://, https://) specifies how the data will be transferred.
* Domain Name: (e.g., www.example.com) identifies the server hosting the website.
* Port: (e.g., 80 for HTTP, 443 for HTTPS) specifies the port number on the server to connect to (often omitted if standard).
* Path: (e.g., /path/to/page.html) specifies the specific resource on the server.
* Query Parameters: (e.g., ?key=value) optional data passed to the server.
* Fragment: (e.g., #section) points to a specific part of the page after it's loaded.
2. HSTS Check (for HTTPS)
If the protocol is HTTPS, the browser checks if the domain is in its HSTS (HTTP Strict Transport Security) preload list or if it has previously received an HSTS header for this domain. If so, it automatically upgrades the connection to HTTPS, even if the user typed http://.
3. DNS Lookup
The browser needs to translate the human-readable domain name (e.g., www.example.com) into an IP address (e.g., 192.0.2.1) that computers use to identify each other on the internet.
* Browser Cache: The browser first checks its own DNS cache.
* OS Cache: If not found, it checks the operating system's DNS cache.
* Router Cache: If still not found, it checks the router's DNS cache.
* ISP DNS Server: Finally, it queries the configured DNS server (usually provided by your Internet Service Provider).
* Recursive DNS Query: The ISP's DNS server performs a recursive query, starting with root DNS servers, then TLD (Top-Level Domain) servers (e.g., .com), and finally authoritative name servers for the specific domain, until it finds the IP address.
4. Establishing a TCP Connection (Three-Way Handshake)
Once the IP address is obtained, the browser initiates a TCP (Transmission Control Protocol) connection to the web server on the specified port. This involves a "three-way handshake": * SYN: The client sends a SYN (synchronize) packet to the server. * SYN-ACK: The server responds with a SYN-ACK (synchronize-acknowledge) packet. * ACK: The client sends an ACK (acknowledge) packet, and the connection is established.
5. TLS/SSL Handshake (for HTTPS)
If the protocol is HTTPS, a TLS (Transport Layer Security) handshake occurs after the TCP connection is established. This process encrypts the communication between the browser and the server: * The client and server exchange certificates and cryptographic parameters. * They agree on a shared secret key for symmetric encryption. * All subsequent data transfer is encrypted.
6. Sending the HTTP Request
The browser constructs and sends an HTTP (Hypertext Transfer Protocol) request to the server. This request includes:
* Request Method: (e.g., GET, POST) indicating the desired action.
* Path: The specific resource being requested.
* HTTP Version: (e.g., HTTP/1.1, HTTP/2).
* Headers: Additional information like User-Agent (browser type), Accept (acceptable content types), Cookie (session information), etc.
7. Server Processing
The web server receives the request, processes it, and generates a response. This might involve: * Retrieving a static file (HTML, CSS, JavaScript, images). * Executing server-side scripts (e.g., PHP, Python, Node.js) to dynamically generate content. * Interacting with databases.
8. Receiving the HTTP Response
The server sends an HTTP response back to the browser. This response includes:
* Status Code: (e.g., 200 OK, 404 Not Found, 500 Internal Server Error) indicating the outcome of the request.
* Headers: Information about the response, such as Content-Type (e.g., text/html), Content-Length, Set-Cookie, Cache-Control.
* Body: The actual content of the requested resource (e.g., HTML, JSON, image data).
9. Browser Rendering
The browser receives the HTML content and begins the rendering process: * HTML Parsing: The browser parses the HTML to construct the DOM (Document Object Model) tree. * CSS Parsing: It parses CSS (Cascading Style Sheets) to construct the CSSOM (CSS Object Model) tree. * Render Tree Construction: The DOM and CSSOM are combined to form the render tree, which contains visual elements in the order they will be displayed. * Layout (Reflow): The browser calculates the exact position and size of each element on the screen. * Painting: The browser draws the pixels for each element on the screen. * JavaScript Execution: If JavaScript files are encountered, the browser downloads, parses, and executes them. JavaScript can modify the DOM and CSSOM, triggering further reflows and repaints. * Resource Loading: As the HTML is parsed, the browser discovers other resources (images, videos, additional CSS/JS files) and initiates new HTTP requests to fetch them, often in parallel.
10. Page Display
The browser continuously updates the display as resources are loaded and rendered, eventually presenting the complete web page to the user.
11. Connection Termination
After all resources are loaded or after a period of inactivity, the TCP connection may be closed by either the client or the server. For persistent connections (HTTP/1.1 and later), the connection might be kept open for subsequent requests to the same server.