preface

This is the fourth day of my participation in the August More Text Challenge. For details, see “August More Text Challenge”.

Personal summary, for reference only, feel satisfied, give a praise! Fuels!

The general process is shown in the figure below:

  • First, the browser process receives a URL request entered by the user, which the browser process sends to the network process.

  • The network process then initiates the URL request.

  • The network process receives the response header data, parses it, and forwards it to the browser process.

  • When the browser process receives the response header from the network process, it sends a “CommitNavigation” message to the rendering process.

  • Once the render process receives the “submit navigation” message, it is ready to receive HTML data, both directly and through the network process resume data pipeline.

  • Finally, the rendering process sends a “confirm commit” to the browser process, which tells the browser process that it is “ready to receive and parse the page data.”

  • When the browser process receives the “submit document” message from the render process, it begins to remove the old document and then updates the page state in the browser process.

The process of my interview answers is:

1. Determine whether the search content or URL address is entered in the address bar:

If it is the search content, the search engine will combine the search content and convert it into the corresponding URL. If it is a domain name, a protocol (such as HTTPS) is added to synthesize the full URL.Copy the code

2. The browser process sends the URL to the network process through inter-process communication (IPC)

After the enter key is pressed, the browser process sends the URL via inter-process communication (IPC) to the network process, which then initiates the actual network request.Copy the code

3. Check the cache

After receiving the URL, the network process checks whether the URL is cached. If it is cached and has not expired, it returns the resource to the browser process.Copy the code

Browser caching mechanism: juejin.cn/post/697866…

3. If there is no cache, the network process will send AN HTTP request to the server. The request process is as follows:

(1) The DNS resolves the corresponding IP address; If the request protocol is HTTPS, then a TLS connection also needs to be established.Copy the code

DNS resolution order:

Recursive query between client and server, server and server is directly iterative query

(2) Then use the IP address and the server to establish the TCP chain connection. Once the connection is established, the browser builds the request line, the request, and so on, appends data such as cookies related to the domain name to the request header, and then sends the built request to the server. (3) After receiving the request information, the server will generate response data (response header, response line, response body and other information) according to the request information, and send it to the network process. (4) After receiving the message, the network process will parse the content of the response header.Copy the code

redirect

If the returned status code is 301 Moved Permanently (permanent redirection) or 302 Found (temporary redirection), the browser will redirect to a new URL that the network process obtained from the Location field in the response header.

4. Set up a TCP connection

(1) Three handshakes

Three-way handshake :(SYN) ACK (acknowledgement character)

  • First handshake: The Client sets the SYN flag bit to 1, generates a value seq=x randomly, and sends the packet to the Server. The Client enters the SYN_SENT state and waits for the Server to confirm.

  • Second handshake: After receiving the data packet, the Server knows that the Client requests to establish a connection by the flag bit SYN=1. The Server sets both the flag bit SYN and ACK to 1, ACK =x+1, generates a value seq=y randomly, and sends the data packet to the Client to confirm the connection request. The Server enters the SYN_RCVD state

  • The third handshake: After receiving the acknowledgement, the Client checks whether the ACK is J+1 and ACK is 1. If it is correct, the ack flag bit is set to 1 and ACK =K+1 and the packet is sent to the Server. The Server checks whether the ACK is K+1 and ACK is 1. The Client and Server enter the ESTABLISHED state and complete the three-way handshake. Then data transmission between the Client and Server starts.

Why not two or four times?

Short answer:

  1. The first handshake indicates that the client can send

  2. The second handshake indicates that the server can receive and send

  3. The third handshake indicates that the client can receive the handshake

(2) After the connection is established, the server returns data

(3) Four waves

  • First wave: The Client sends a FIN=M(releasing a connection) to close data transfer between the Client and the Server, and the Client enters the FIN_WAIT_1 state.

  • Second wave: After receiving the FIN, the Server sends an ACK =M+1 to the Client to confirm that the receiving sequence number is +1(same as SYN, one FIN takes one sequence number). The Server enters CLOSE_WAIT state.

  • Third wave: The Server sends a FIN = N wave to close data transfer from the Server to the Client. The Server enters the LAST_ACK state.

  • Fourth wave: After receiving the FIN, the Client enters the TIME_WAIT state and sends an ACK to the Server. The ACK number is N+1. The Server enters the CLOSED state and completes the fourth wave.

Why do you need four times?

Short answer:

  1. First wave to the client: Send a request to release the connection FIN=M packet.

  2. The second wave to the server says: I still have data to send, you wait for a while, ACK=M+1;

  3. Third wave server: Send a request to release the connection FIN=N packet, indicating that you can disconnect;

  4. Fourth wave client: Send send ACK=N+1 and wait for 2MLS.

Why wait for 2MSL?

Maximum Segment Lifetime (MSL): indicates the maximum segment lifetime of a message

2MSL = Maximum lifetime of coming ACK (1MSL) + Maximum lifetime of coming FIN (1MSL)

According to RFC 793, MSL is 2 minutes. In practice, 30 seconds, 1 minute and 2 minutes are commonly usedCopy the code
Do I have to wait for 2MSL?

If not, the released port may reconnect to the server port that was just disconnected. In this case, the old TCP packet that is still alive in the network may conflict with the new TCP connection packet, resulting in data conflict. To avoid this situation, it is better to wait for 2MSL.

5. Prepare the render process

By default, Chrome assigns a rendering process to each page, which means that a new rendering process is created with each new page opened.

When the rendering process is ready, it cannot immediately enter the document parsing state, because the document data is still in the network process and has not been submitted to the rendering process, so the next step is to submit the document.

6. Submit the document

The browser process submits the HTML data received by the network process to the rendering process. The process works like this:

(1) First, when the browser process receives the response header data from the network process, it will send a message of “submit document” to the rendering process;

(2) After receiving the message of “submit document”, the rendering process will establish a “pipeline” for data transmission with the network process;

(3) After the document data transmission is completed, the rendering process will return a message of “confirm submission” to the browser process;

(4) After receiving the “submit confirmation” message, the browser process will update the browser interface status, including security status, URL of address bar, forward and backward historical status, and update the Web page.

7. Page rendering

(1) HTML is converted into a DOM tree (a binary tree structure) by the HTM parser;

(2) CSS according to THE CSS rules and CSS interpreter into the CSSOM tree (CSS rule tree);

(3) Merge DOM tree and CSSOM tree to form Render tree;

(4) Layout stage, calculate the Layout information of elements. Layering the layout tree and generating the layering tree;

(5) Paintting stage, traversing the rendering tree to draw all nodes, applying the corresponding style to each node and displaying it on the page.

reference

How browsers work and practice