Abstract: 1.DNS domain name resolution; 2. Establish a TCP connection. 3. Send an HTTP request. 4. The server processes the request. 5. Return the response result. 6. Close the TCP connection. 7. Browser parses HTML; 8. Browser layout rendering; conclusion

When we type the url into the browser and press Enter, it all starts here.

DNS domain name resolution

When we enter the url in the browser, we actually want to ask the server for the page content we want. The first thing all browsers need to confirm is where the server corresponding to the domain name is located. The DNS server resolves the domain name to the corresponding server IP address.

After receiving the domain name you entered, the client first checks the local hosts file to see whether there is a mapping between the domain name and IP address. If there is a mapping between the domain name and IP address, the client sends a request to the IP address. If not, the client searches for the DNS server. Most users rarely edit or modify the hosts file.



The browser client sends a DNS query packet containing the domain name www.cnblogs.com to the local DNS server. The local DNS server forwards the query packet to the root DNS server. The root DNS server notices the com suffix and returns the IP address of the comDNS server to the local DNS server. The local DNS server again sends a query request to the comDNS server, which notices the www.cnblogs.com suffix and responds with the IP address of the authoritative DNS server responsible for the domain name. Finally, the local DNS server sends a response packet containing the IP address of www.cnblogs.com to the client.

The query from client to local server is recursive, while the interaction between DNS servers is iterative.

Normally, the local DNS server already has the address of the comDNS server in the cache, so the step of requesting the root DNS server is not necessary. 2. Establish a TCP connection

I finally got the server IP, and the next natural step was to link to the server. For the client – server TCP connection, there must be a “three – way handshake”.

Three-way handshake

The client sends a packet with the SYN flag to the server. After receiving the packet, the server sends a packet with the SYN/ACK flag to confirm the connection. Finally, the client sends another packet with the ACK flag to indicate that the handshake is complete and the connection is successful.

The image above can also be interpreted this way:

Client: “hello, at home not, have you express.”

Server end: “in of, deliver line.”

Client: “Ok.”

Send an HTTP request

Once you have established a connection to the server, you can make requests to the server. Here we first look at the structure of the request message (as shown below) :

The request message

View the packet header in the browser (Google Browser is used as an example) :

The request line contains the request method, URI, and HTTP version. Header fields pass important information, including request header fields, generic header fields, and entity header fields. We can see the details of the sent request in the message. The purpose of each header field is not explained here.

The server processes the request

After the server receives the request, the Web server (HTTP server to be exact) processes the request, such as Apache, Ngnix, IIS, etc. The Web server parses the user request, knows which resource files need to be scheduled, processes the user request and parameters through these resource files, and calls the database information, and finally returns the results to the browser client through the Web server.



The server processes the request

Return the response result

In HTTP, a request gets a response, even if it’s an error message. Here we also look at the composition structure of the response message:

The response message

There is always an HTTP status code in the response result, such as 200, 301, 404, 500, etc. Using this status code, we can know whether the processing on the server side is normal, and we can know the specific error.

The status code consists of three digits and a reason phrase. According to the first digit, the status code can be divided into five categories:

Status code category

6. Close the TCP connection

To avoid resource consumption and wastage on both the server and client, either party can initiate a shutdown request when no request or response is delivered. Similar to the three-way handshake used to create a TCP connection, four handshakes are required to close a TCP connection.



4 times to shake hands

The image above can be interpreted this way:

Client: “brother, I have no data to transfer, let’s close the connection.”

Server: “Roger, LET me see if I have any data.”

Server: “Brother, I have no data to transfer to you, we can close the connection.”

Client: “Ok.”

Browsers parse HTML

Specifically, browsers need to load and parse not only HTML, but also CSS and JS. As well as loading images, videos and other media resources.

The browser parses the HTML, generates the DOM tree, parses the CSS, generates the CSS rule tree, and then generates the render tree from the DOM tree and the CSS rule tree. Unlike DOM trees, render trees do not have nodes that do not need to be displayed, such as head or display none.

Note that the browser parsing process is not string, such as in the resolution of CSS at the same time, you can continue to load parsing HTML, but in parsing JS script, will stop parsing HTML follow-up, the congestion will occur and related questions about JS blocked, but here, more behind the single opening.

8. Browser layout rendering

Based on the render tree layout, compute CSS styles, which are geometric information such as the size and position of each node in the page. HTML has a streaming layout by default, and CSS and JS break this layout by changing the look and feel of the DOM as well as its size and position. Two important concepts come up here: replaint and reflow.

Replaint: Part of the screen is redrawn without affecting the overall layout, e.g. the background color of a CSS is changed, but the geometry and position of elements remain the same.

Reflow: means that the geometry of the component has changed and we need to revalidate and evaluate the render tree. Part or all of the render tree has changed. That’s a Reflow, or Layout. Reflow and Replaint should be kept to a minimum, which I think is one of the reasons why table layouts are rarely used today.

Finally, the browser draws each node and presents the page to the user.

conclusion

This paper systematically describes the whole process from the browser to enter the domain name to the final page display. I don’t have enough space to cover each step in this article, so I will start with a separate section on domain name resolution, HTTP request/response, browser resolution, rendering, etc. If you are interested, you can also follow my blog.

More technology sharing, welcome to “website construction operation encyclopedia”

Reference:

Igoro.com/archive/wha…

taligarsiel.com/Projec…

www.zhihu.com/questio…

Image making tools: Axure, PS, Ulead GIF Animator, ProcessOn