The diagram below illustrates the steps.

--- 
title: Refreshing an Expired Access Token
---
sequenceDiagram
	autonumber
	actor User
	participant Browser
	participant DNSCache
	participant DNSResolver
	participant Server
	
	User->>Browser: enters an URL in the browser
 say https://k5kc.com/cs/algorithms/2sum-problem
	Browser->>DNSCache: Look up IP
	Browser->>DNSResolver: Send DNS Query 
 (If not found in dns cache)
	DNSResolver-->>Browser: Resolve URL to IP Address
	Browser->>Server: Establishes TCP connection
	Browser->>Server: Send HTTP/HTTPS Request
	Server-->>Browser: Process Request and Send Response
	Browser->>Browser: Render HTML Content
	Browser->>Browser: Fetch and Execute CSS/JavaScript
	Browser-->>User: Page Fully Loads
	User-->>Browser: Possible Interactions

1. User enters a URL into the Browser and hits Enter.

A URL consists of four parts in this example:

  • Scheme: https:// indicates the browser should use HTTP.
  • Domain: k5kc.com represents the site’s domain name.
  • Path: cs/algorithms specifies the path to the requested resource on the server.
  • Resource: 2sum-problem is the specific resource Bob wants to access.

More on URL structure - URL Structure.

2. The Browser Looks up the IP Address for the Domain with a Domain Name System (DNS) Lookup.

The Domain Name System (DNS) is a database that maps website names to their corresponding IP addresses. Every URL has a unique IP address which directs to the computer hosting the requested website. For example, www.google.com resolves to the IP address 209.85.227.104, hence accessing http://209.85.227.104 will lead you to Google. DNS functions similarly to a phone book, matching website names to IP addresses.

DNS’s primary purpose is to enable user-friendly navigation. More on DNS - Domain Name System DNS Index.

To expedite the lookup, DNS data is cached at various levels: browser cache, OS cache, local network cache, and ISP cache:

  • Browser Cache: Temporarily stores DNS records (lasting 2-30 minutes, depending on the browser).
  • OS Cache: If not found in the browser cache, the OS cache is checked.
  • Router Cache: The router, typically having its own DNS cache, is the next check.
  • ISP DNS Cache: Finally, the ISP’s DNS server cache is checked.

3. If No Cache Contains the IP Address, the Browser Initiates a Recursive DNS Lookup.

--- 
title: Where is k5kc.com?
---
sequenceDiagram
	participant A as DNS Recurser
	participant B as Root name server
(198.41.0.4)
	participant C as .com name server
(192.5.6.30)
	participant D as k5kc name server
(1.1.1.1)

	
	
	A->>B: 1
	B->>A: Try "204.74.112.1"
	A->>C: 2
	C->>A: Try "207.142.131.234"
	A->>D: 3
	D->>A: k5kc is at 172.67.192.160

Techniques to alleviate bottlenecks when domains resolve to a single IP address include:

  • Round-robin DNS: Provides multiple IP addresses for a single domain.
  • Load Balancers: Distribute requests across several servers.
  • Geographic DNS: Assigns domain names to IP addresses based on the user’s location, enhancing scalability.
  • Anycast: Routes a single IP address to multiple servers, although it’s less frequently used with TCP.

To ensure high availability and low latency, most DNS servers implement anycast.

The ISP’s DNS server, functioning as a DNS recursor, queries other DNS servers, known as name servers, according to the domain’s hierarchy. More on DNS - DNS Server Types#Root Servers.

You can use tools like nslookup or ping to see

4. With the IP Address Obtained, the Browser Sets Up a TCP Connection to the Server.

More on TCP connection - Transport Control Protocol TCP Explained#TCP 3-way Handshake.

5. The Browser Sends an HTTP Request to the Server.

The request looks like this:

𝘎𝘌𝘛 /cs/algorithms/2sum-problem/
𝘏𝘰𝘴𝘵: k5kc.𝘤𝘰𝘮

Sample GET request (Headers are highlighted):

There are various tools available for viewing raw HTTP requests and responses. My preferred tool is Fiddler, although others like FireBug are also useful. These tools are invaluable for site optimization.

If you want to see what’s happening behind the scenes, tools like Firebug allow you to inspect HTTP requests, revealing the exchanges between clients and servers.

6. The Server Processes the Request and Returns a Response.

The server contains a web server (i.e Apache, IIS) which receives the request from the browser and passes it to a request handler to read and generate a response. The request handler is a program (written in ASP.NET, PHP, Ruby, etc.) that reads the request, its’ headers, and cookies to check what is being requested and also update the information on the server if needed. Then it will assemble a response in a particular format (JSON, XML, HTML). For a successful response (the status code is 200). The HTML response might look like this: 

𝘏𝘛𝘛𝘗/1.1 200 𝘖𝘒  
𝘋𝘢𝘵𝘦: 𝘚𝘶𝘯, 30 𝘑𝘢𝘯 2022 00:01:01 𝘎𝘔𝘛  
𝘚𝘦𝘳𝘷𝘦𝘳: 𝘈𝘱𝘢𝘤𝘩𝘦  
𝘊𝘰𝘯𝘵𝘦𝘯𝘵-𝘛𝘺𝘱𝘦: 𝘵𝘦𝘹𝘵/𝘩𝘵𝘮𝘭; 𝘤𝘩𝘢𝘳𝘴𝘦𝘵=𝘶𝘵𝘧-8  

<!𝘋𝘖𝘊𝘛𝘠𝘗𝘌 𝘩𝘵𝘮𝘭>  
<𝘩𝘵𝘮𝘭 𝘭𝘢𝘯𝘨="𝘦𝘯">  
....
</𝘩𝘵𝘮𝘭>

Example HTTP server response:

7. The Browser Renders the HTML Content.

The browser first displays the basic HTML structure, then issues GET requests for additional resources (images, CSS, JavaScript). These resources are cached for future visits, ultimately displaying the fully loaded page like maps.google.com. And that’s it!