DEV Community

Palomino for Logto

Posted on • Originally published at blog.logto.io

How does the browser process the URL input in the address bar?

When we open a particular URL in the browser, how does the browser load and display the content? We show what the browser did in turn, according to the order in which the event occurs.


In addition to a few specific web browsing with custom native apps while browsing different web pages, most web pages are browsed with a browser. So when we open a particular URL in the browser, how does the browser load and display the content? We will show what the browser did in turn, according to the order in which the event occurs.

User inputs URL in browser

In our previous blog post we covered URL components including what is known as the host/domain, e.g. www.google.com blog.logto.io etc.

IP address lookup using host/domain

Browser cannot directly understand the host/domain and find the corresponding resources, but needs to know the specific IP address to locate the location of the resources required for web pages.

The browser will find the IP address corresponding to the host/domain through the domain name system (DNS).

In order to make the process of searching for IP addresses as fast as possible, the correspondence between host/domain and IP address often uses various caches, such as browser cache, operating system cache, and so on.

When cache lookup misses, we go through the regular DNS lookup process to find a host/domain's IP address. These are the steps:
Image description

  1. When a user enters blog.logto.io in the web browser, the web browser requests the DNS service to get the IP address, the corresponding query is received by DNS resolver
  2. DNS resolver queries DNS root server (.)
  3. Root server returns an address corresponding to a Top Level Domain (TLD) DNS server (.io in this case) and some associated information
  4. DNS resolver query .io TLD server
  5. .io TLD server respond with logto.io name server address
  6. DNS resolver requests logto.io domain name server
  7. logto.io domain name server respond with blog.logto.io address
  8. DNS resolver forward blog.logto.io IP address back to web browser

The web browser can then request the corresponding resources from the server and render the website for the user to view.

Establish TCP connection

After obtaining the IP address corresponding to the domain to be browsed through the DNS service, the web browser initiates and establishes a TCP connection with the server.

Get resources and render web pages

After establishing a TCP connection, the browser initiates a network request to the server, obtains the corresponding resources, and renders the web page content based on the obtained resources for the user to browse.

Try Logto Cloud for free

Top comments (1)

Collapse
 
primetarget profile image
Ethan Anderson

This is a really informative post—thanks for breaking down the process so clearly! Just curious, could you elaborate a bit more on what happens in cases where the DNS lookup fails?