What happens from URL input to page display?

Preface

What exactly happens when you open a browser, input a URL, and then the web page appears in front of you? What kind of process does it go through? This is the question this article will explore!

1. What is URL?

URL (Uniform Resource Locator), a uniform resource locator, is used to locate resources on the Internet, commonly known as the URL.

For example, http://www.w3school.com.cn/html/index.asp follows the following syntax rules: scheme://host.domain:port/path/filename

explain:

• Scheme - defines the type of Internet service. Common protocols include http, https, ftp, and file. The most common type is http, while https is used for encrypted network transmission.
• host - defines the domain host (the default host for http is www)
• domain - defines the Internet domain name, such as w3school.com.cn
• :port - defines the port number on the host (the default port number for http is 80)
• path - defines the path on the server (if omitted, the document must be located in the root directory of the website).
• filename - defines the name of the document/resource

2. Domain Name Resolution (DNS)

After entering the URL in the browser, it must first go through domain name resolution. Because the browser cannot recognize the domain name, it is necessary to directly find the corresponding IP address through the domain name. You may have a question here - why do we need to set a domain name? It is better to give an IP address from the beginning, which can save a lot of trouble.

Let's first understand what an IP address is.

IP address refers to Internet Protocol address, which is the abbreviation of IP Address. IP address is a unified address format provided by IP protocol. It assigns a logical address to each network and each host on the Internet to shield the difference of physical address. IP address is a 32-bit binary number, such as 127.0.0.1 is the local IP; if each URL is a string of numbers, it will be difficult to remember!

A domain name is like an IP address in disguise, wearing a mask. Its function is to make a group of server addresses easier to remember and communicate. But this sometimes brings a risk - DNS hijacking, which means that the domain name no longer corresponds to the original IP address. The result is that a specific network cannot be accessed or the accessed URL is a fake URL, which is difficult for users to detect. It has caused nearly 1% of the customers of Brazil's largest bank, Banco do Brasil, to be attacked and their accounts stolen.

Domain name resolution process

• Browser cache: If the host specified by the URL has been visited before, the browser will cache the IP address of the host for a period of time (specified by the browser), and then find the corresponding host through the IP address;
• System cache: If the browser does not have the cache, it will query the system cache. The browser will make a system call to query the cache.
• Router cache: If the system cache does not have the address, the router cache will be queried.
• ISP DNS cache: If the router cache still does not hit, then query the ISP DNS. General domain names can be found here;
• Recursive search: If none of the above results are found, a recursive query will be performed on the root server of the top-level domain name server. As long as the domain name exists, it will be found.

After finding the corresponding IP address through domain name resolution, the corresponding server is found through the IP address, and the browser sends the http request initiated by the user to the server. The next step is the server processing stage.

3. Server processing response request

server

A server is a high-performance computer in a network environment. It listens to service requests submitted by other computers (clients) on the network and provides corresponding services, such as web page services, file download services, mail services, and video services. The main functions of the client are to browse web pages, watch videos, listen to music, etc. The two are completely different. An application that processes requests, the web server, is installed on each server. Common web server products include apache, nginx, IIS, or Lighttpd.

The web server plays a management and control role. For requests sent by different users, it will combine the configuration files and delegate different requests to the programs on the server that handle the corresponding requests for processing (such as CGI scripts, JSP scripts, servlets, ASP scripts, server-side JavaScript, or some other server-side technologies, etc.), and then return the results generated by the background program processing as a response.

Difference between server and client

4. Website processing stage

Website processing is the actual backend processing work. There are many frameworks for backend development now, but most of them are still built according to the MVC design pattern.

MVC is a design pattern that divides an application into three core components: model - view - controller, which each handles its own tasks to achieve the separation of input, processing and output.

1. View

The view is the interface that the user sees and interacts with.

2. Model

Models represent enterprise data and business rules. Among the three components of MVC, models have the most processing tasks. A model can provide data for multiple views.

3. Controller

MVC.png

The controller accepts user input and calls the model and view to meet the user's needs. The controller belongs to the manager role, receives requests from the view and decides which model component to call to process the request, and then determines which view to use to display the data returned by the model processing.

In summary, first the controller receives the user's request and decides which model should be called for processing. Then the model uses business logic to process the user's request and returns data. Finally, the controller uses the corresponding view to format the model and returns an HTML string to the browser, which presents the web page to the user. Therefore, the next step is the browser processing stage.

5. Browser Processing

After the browser gets the response text HTML, take the Chrome browser as an example to introduce the browser rendering mechanism

Chrome browser rendering mechanism

• Processes HTML tags and builds the DOM tree.
• Processes CSS markup and builds the CSSOM tree.
• Merge DOM and CSSOM into a render tree.
• The layout is based on the rendering tree to calculate the geometric position of each node (that is, each element), which is also called the layout and reflow process.
• Finally, each node is drawn on the screen by calling the operating system's Native GUI API.
• So we have come to the final stage of drawing the web page.

6. Draw a web page

After the browser calculates the rendering tree based on HTML and CSS, it displays the rendered page image, that is, draws the web page, and begins to respond to user operations.