Classic front-end interview question: What happens after you enter the URL

This is the 18th day of my participation in Gwen Challenge

Basic process:

1 Query the IP address

② Establish a TCP connection and access the server

③ The browser sends an HTTP request

④ The server performs operations on the background and responds with HTTP

⑤ Page parsing and rendering

The detailed steps are as follows:

Querying an IP Address

① The browser resolves the domain name in the URL.

② Query the DNS cache of the browser.

3 If no DNS cache exists in the browser, check whether the hosts file on the local client has an IP address.

4 If no, check whether the local DNS server (provided by the carrier) has a DNS cache.

⑤ If the local DNS does not have DNS cache, query the DNS cache to the root server for recursive search.

⑥ Recursive search starts from the top-level domain name (such as.com), step by step to narrow the scope, and finally the client to obtain the IP address.

TCP connection and HTTP connection

(1) THE HTTP protocol is based on the TCP protocol. Before the HTTP request, a TCP connection is required to form a stable channel from the client to the server. Commonly known as the TCP three-way handshake.

② After the TCP connection is completed, the HTTP request starts. There are many ways to request, such as GET and POST.

③ THE HTTP request contains a request header, which may also contain two parts of the request body. The request header contains the information we want to operate on the request file, and the request body contains the parameters passed to the background.

④ After the server receives the HTTP request, the background starts to work, such as load balancing, cross-domain, etc., here is the work of the back end.

⑤ After the file is processed, a response packet is generated. The response also contains two parts, the response header and the corresponding body. The response body is the file we requested.

⑥ After network transmission, the file is downloaded to the local client, and the client starts loading.

HTML rendering

① After the client browser loads the HTML file, it parses the HTML into a DOM Tree from top to bottom.

② When a CSS file is encountered, the URL in the CSS initiates an HTTP request.

(3) This is the second HTTP request. The http1.1 protocol adds a Connection: keep-alive declaration, so the TCP Connection is not closed.

(4) The HTTP connection is stateless, and the client and server need to initiate a request and response again.

During the CSS request, the parser continues parsing the HTML and then comes to the script tag.

⑤ Because script may change the DOM structure, the parser stops generating the DOM tree. The parser is blocked by JS, waiting for the JS file to initiate an HTTP request and then load. This is the third HTTP request. The parser continues parsing after js execution is complete.

⑥ The CSS file may affect the execution result of the JS file, so wait until the CSS file is loaded.

⑦ After the browser receives the CSS file, it starts to parse the CSS file into the CSSOM Rule Tree.

8. After the CSSOM Tree is generated, DOM Tree and CSS Rule Tree are combined to generate the Render Tree.

⑨ The Render Tree will be blocked by CSS files. After the Tree is generated, it will be laid out, and the attributes of the nodes in the Tree (position, width, size, etc.) will be drawn, and the page will be rendered with information.

⑩ Continued parsing and rendering, encountering another JS file that changed the DOM tree. The rendering tree started rendering again from the changed DOM.

By continuing rendering down, we encounter an IMG tag, the browser makes an HTTP request, does not wait for the IMG load to complete, continues rendering down, and re-renders the part later.

Consequently, the XML tree encounters an HTML closing tag, stops parsing, and ends rendering.

From now on, we can get some optimization methods of the website:

① Reduce DNS query: Add the IP address of the server domain name to the local host file.

② Reduce the number of HTTP requests, use Sprite for pictures, and merge HTML files and CSS files and JS files respectively.

③ Reduce download time: compress pictures, use compression applications to compress the space in the document, delete the file redundant statements and comments, create their own JS compact library and compact framework, use local browser cache.

4. Advance rendering start time: put CSS links in the HTML header.

⑤ Reduce parser blocking: put js links at the end of the body.