Interviewer: Tell me what happens after you enter the URL in the address bar and press Enter?

[[401931]]

This article is reprinted from the WeChat public account "JS Daily Question", the author is Huihui. Please contact the JS Daily Question public account to reprint this article.

1. Simple analysis

A simple analysis shows that the following actions occur from entering the URL to pressing Enter:

• URL Parsing
• DNS Lookup
• TCP Connection
• HTTP Request
• Responding to a request
• Page Rendering

2. Detailed Analysis

URL Parsing

First, determine whether you entered a valid URL or a keyword to be searched, and perform corresponding operations based on the content you entered

The structure of a URL is as follows:

DNS Lookup

I have discussed DNS queries in previous articles, so I will not discuss them here.

The entire query process is shown in the following figure:

Finally, the target server IP address corresponding to the domain name was obtained

TCP Connection

In the previous article, we learned that TCP is a connection-oriented transport layer protocol

After determining the IP address of the target server, a three-way handshake is performed to establish a TCP connection. The process is as follows:

Sending HTTP Request

Once the TCP connection is established, communication can be carried out on this basis, and the browser sends an HTTP request to the target server.

The request includes:

• Request Line
• Request Header
• Request Body

Responding to a request

When the server receives the browser's request, it performs logical operations and returns an HTTP response message after processing is complete, including:

• Status Line
• Response Headers
• Response body

After the server responds, since HTTP now starts a long keep-alive connection by default, when the page is closed, the TCP connection will be disconnected after four waves.

Page Rendering

When the browser receives the resource responded by the server, it will first parse the resource:

• Check the response header information and handle it according to different instructions, such as redirecting, storing cookies, decompressing gzip, caching resources, etc.
• Check the value of Content-Type in the response header and use different parsing methods according to different resource types.

The rendering process of the page is as follows:

• Parse HTML and build DOM tree
• Parse CSS and generate CSS rule tree
• Merge DOM tree and CSS rules to generate render tree
• Layout render tree (Layout / reflow), responsible for calculating the size and position of each element
• Draw the render tree (paint), draw the page pixel information
• The browser sends the information of each layer to the GPU, which composites the layers and displays them on the screen.

References

https://github.com/febobo/web-interview/issues/141

https://zhuanlan.zhihu.com/p/80551769