From entering the domain name address in the address bar to being displayed on the screen, what is the process? The process is discussed below.

Domain name resolution

The browser sends the domain name to the DNS client, and the client checks whether the domain name has been requested in the browser cache (check whether the local hosts file has the URL mapping). If there is no need to query the DOMAIN name from the DNS server, the OBTAINED IP address is marked as the reply from the authoritative server. If not, check with the server again. The server returns the IP address corresponding to the domain name to the browser.

Establishing a TCP Connection

After obtaining the IP address of the object, the client and the browser start to establish a TCP connection, which is the three-way handshake phase.

Client: I’m going to request… Server: know, you request….. Client: Send a request…..

Making an HTTP request

After establishing a connection to the server, the browser starts sending HTTP requests to retrieve resources. The browser gets the response file and starts rendering.

The browser parses HTML => DOM Tree

For the first HTML document to be rendered, the server returns bytes that the browser needs to parse into labels according to the encoding rules defined by the document. After parsing, the text is semantically semantic, and some of the externally referenced tags, such as , refer to an external CSS file, and the browser requests the CSS resource again until the file returns, before continuing to render the DOM Tree.

Parsing CSSOM

Once you get the CSS file, the browser parses the CSSOM. CSSOM is an index tree that reads selectors from right to left, for example

#choose div a

First look for the element of node A, then look for div, and finally look for the node object whose ID is Choose. If it does not match, look for the next node A.

The index tree built in this order is CSSOM:

Build the Render Tree

After the HTML document and CSS document are parsed, the two need to be combined to build the Render Tree. For example, if the CSS element style is set to hide, it does not need to build in the Render Tree.

Layout of the Render Tree

Render immediately after the Render Tree is built and its position on the overall layout is determined.

Execute javascript

When the tag is parsed down and the script is encountered, it executes the script and, if it is an external script, sends the request to the browser again. Because JS often manipulates DOM, it is usually executed last, so as not to obtain DOM object and error. At the same time, if the DOM structure or CSS style is changed in the JS script, it will change the Render Tree and need to calculate the layout again.

Draw the Render Tree

After javascript is executed, the layout of the page is no longer affected, and the Render Tree is finally ready to draw, and a page is finally displayed on the screen after many iterations.

According to the above analysis, when the DOM structure, position and size are changed, the overall layout will have an impression. At this time, it is necessary to reconstruct the Render Tree and calculate the layout, which will improve the performance cost and time cost.