What have you experienced from the input URI to the browser rendering, and the uri browser rendering experience?

What have you experienced from the input URI to the browser rendering, and the uri browser rendering experience?

This article is divided into two parts. In the first part, I will give a general introduction to the entire process from url input to browser rendering. The second part will introduce the detailed functions of each part.

1. The entire process from url input to browser Rendering

1. DNS domain name resolution

2. Create a TCP/IP link

3. WebServer (nginx, tomcat, etc)

4. The server returns an HTTP request

5. HTML display in the browser

II. Specific functions of each module

I. DNS domain name resolution

There are two DNS domain name resolution query methods: recursive resolution and iterative resolution.

Recursive resolution: the local DNS server is responsible for querying other DNS servers. The local DNS server first queries the root server of the domain name. If the domain name cannot be queried, the local DNS server performs a level-1 query, the final query result is returned by the DNS server to the client.

Iterative resolution: when the local server cannot answer the client's DNS query, it performs the query through iterative resolution. The local DNS server does not query other DNS servers, but returns the IP addresses of other DNS servers that can resolve the domain name to the DNS program of the client, the client DNS program continues to query these DNS servers until the query results are obtained.

2. Establish a TCP/IP link

When the IP address corresponding to the domain name is obtained, the browser will try to establish a TCP/IP link with the server.

Three-way handshake of TCP/IP:

The first handshake: Client A sets the flag SYN to 1 and randomly generates A data packet with the value seq = J (the value range of J is = 1234567) to the server, client A enters the SYN_SENT status and waits for confirmation from server B;

The second handshake: After server B receives the data packet, the flag SYN = 1 knows that client A requests establish A connection. Server B sets both the flag SYN and ACK to 1, ack = J + 1, A value seq = K is randomly generated, and the packet is sent to Client A to confirm the connection request. Server B enters the SYN_RCVD state.

The third handshake: After receiving the confirmation, client A checks whether ack is J + 1 and ACK is 1. If yes, set the flag ACK to 1, ack = K + 1, the packet is sent to server B. Server B checks whether ack is K + 1 and ACK is 1. If yes, the connection is ESTABLISHED successfully, and client A and server B enter the ESTABLISHED status, after three handshakes, data can be transmitted between Client A and server B.

Iii. WebServer (nginx, tomcat, etc)

Many websites now use reverse proxy because when the user access volume reaches a certain level, one server is far from enough. At this time, you need to deploy the same application on multiple servers, one-way load balancing. In this case, the client does not access the specific server through the HTTP protocol, but first accesses Nginx/tomcat, then requests the server, and then returns the result.

4. The server returns an HTTP request

An HTTP Response consists of three parts: Status line, Response Header, and Response body.

　　　　Status line:Status lineProtocol version, Numeric formStatus Code, And the correspondingStatus descriptionThe elements are separated by spaces.

　　　　1xx: Information Status Code, indicating that the server has received the client request, and the client can continue to send the request.

2xx: Success status code, indicating that the server has successfully received and processed the request.

3xx: Redirection status code, indicating that the server requires client redirection.

4xx: The client error status code, indicating that the client request has illegal content.

5xx: Server Error status code, indicating that the server fails to process client requests normally and an unexpected error occurs.

5. HTML display in the browser

Because the parsing process is not the same for different browsers, we will take webkit as an example.

Parse html to build the dom tree-> build the render tree-> layout the render tree-> draw the render tree.

When parsing html files, the browser loads them from top to bottom and performs parsing rendering during the loading process. When an external resource is requested during parsing, the request process is asynchronous and does not affect the loading of html documents.

During the parsing process, the browser first parses the HTML file to build the DOM tree, then parses the CSS file to build the rendering tree. After the rendering tree is built, the browser begins to layout the rendering tree and draws it to the screen. This process is complex and involves two concepts: reflow and repain ).

Each element in the DOM node exists in the form of a box model, which requires the browser to calculate its location and size. This process is called relow. When the location of the box model, after determining the size and other attributes, such as the color and font, the browser begins to draw the content. This process is called repain.

When a page is loaded for the first time, it will inevitably experience reflow and repain. The reflow and repain processes consume a lot of performance, especially on mobile devices. They damage the user experience and sometimes cause page freezing. Therefore, we should minimize reflow and repain.

When a js file is encountered during file loading, the html file suspends the rendering (loading resolution rendering synchronization) thread, not only waiting for the js file loading in the document to complete, but also waiting for the parsing to complete, to restore the rendering thread of the html document. Because JavaScript may modify the DOM, the most classic document. write, which means that the subsequent download of all resources may be unnecessary before JS execution is complete, which is the root cause of js blocking subsequent resource downloads. Therefore, in my daily code, js is placed at the end of the html document.

JS Parsing is completed by the JS parsing engine in the browser, such as Google's V8. JS runs in a single thread. That is to say, only one task can be done within the same time period. All tasks need to be queued. The previous task ends and the other task can start. However, some tasks are time-consuming, such as I/O Reading and Writing. Therefore, a mechanism is required to first execute the following tasks: synchronization tasks (synchronous) and asynchronous ).