System Design: Web Browsing Behind the Scene

Have you ever wondered how a web page is displayed in the browser once you type an URL and press enter? What happens behind the scene is actually quite complex and interesting, though all of them complete in seconds and thus is usually transparent to users.

Service localization

Web services are located and identified by IP addresses, though we usually visit them via URLs (Uniform Resource Locators). It relies on DNSs (Domain Name Systems) to translate readily memorized URLs to numerical IP addresses. Accessing and querying a DNS involves certain networking overhead. To reduce such cost, IP addresses of frequently visited web services are often cached in the following levels:

  1. Browser cache with a fixed duration for websites previously visited.
  2. Operating system-level cache, e.g., Windows system call gethostname.
  3. Router cache.
  4. ISP (Internet Service Provider) cache.

In case of a cache miss from all the four levels, ISPs need to query DNSs. This is conducted with a strategy called recursive search. The search traverses a URL reversely starting from the root domain, followed by the top-level domain, second-level domain, and so on. In this situation, the ISP’s DNS server is called DNS recursor and the other DNS servers are called name servers. Among DNS servers, routing tables are used to figure out the fastest possible way of reaching the destination.

Connection establishment

Once the service is located, the browser next initiates a connection to the web service. TCP is the most common protocol used for HTTP requests. A TCP connection between the client (e.g., browsers) and the server can be established through a TCP/IP three-way handshake process:

  1. The client sends a SYN (synchronize) message with a sequence number \(x\) to the server.
  2. The server responses to the client request with a SYN-ACK (synchronize-acknowledgment) message with its own sequence number \(y\) and the acknowledgement number \(x+1\).
  3. The client acknowledges the server response with an ACK (acknowledgement) message with the acknowledgement number \(y+1\).

Data exchange

With the established connection, the browser sends a GET request to ask for a web page from the server. The browser sends a POST request if it is providing information such as credentials or a form submission.

Client requests are received by a web server (e.g., Apache HTTP Server) and then passed to a request handler (a program written in PHP, Ruby, etc.). The request handler finally generates a response in a particular format such as HTML, XML, JSON, etc.

Content display

Take HTML for example, the display of a web page can take multiple rounds of the above process. Once an HTML file is received, the browser will further check the HTML tags and then request for additional elements of the web page, such as images, CSS stylesheets, JavaScript files, etc. The fetch of each such element will need to go through the same process starting from the service localization (DNS query).

Contents