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.

Darcy Ye

Developer

8/9/20242 min read

Stop wasting weeks on user auth

Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.

Get started

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:

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
DNS resolver queries DNS root server (.)
Root server returns an address corresponding to a Top Level Domain (TLD) DNS server (.io in this case) and some associated information
DNS resolver query .io TLD server
.io TLD server respond with logto.io name server address
DNS resolver requests logto.io domain name server
logto.io domain name server respond with blog.logto.io address
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

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).

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

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

DNS resolver queries DNS root server (.)

Root server returns an address corresponding to a Top Level Domain (TLD) DNS server (.io in this case) and some associated information

DNS resolver query .io TLD server

.io TLD server respond with logto.io name server address

DNS resolver requests logto.io domain name server

logto.io domain name server respond with blog.logto.io address

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.

User inputs URL in browser#

IP address lookup using host/domain#

Establish TCP connection#

Get resources and render web pages#

User inputs URL in browser#

IP address lookup using host/domain#

Establish TCP connection#

Get resources and render web pages#

User inputs URL in browser

IP address lookup using host/domain

Establish TCP connection

Get resources and render web pages

User inputs URL in browser

IP address lookup using host/domain

Establish TCP connection

Get resources and render web pages