What happens when we type a URL?——Hot front-end interview questions

What happens when we type a URL? It has always been the key question of the front-end interview. This article explains each step in detail in two parts. I believe it will be helpful to you.

Network request section

1. The user enters a keyword, and the address bar judges whether it is the search content or the url address

   • If it is search content, it will use the browser's default search engine plus search content to synthesize the url;
   • If it is a domain name, a protocol (such as https) will be added to form a complete url.

2. Then press Enter. The browser process passes the url to the network process through IPC ——inter-process communication. (the network process initiates a real network request only after receiving the url).

3. After the network process receives the url, first check whether there is a cache. (Check the strong cache first, if it hits, use the cache resource directly, otherwise enter DNS resolution)

   • There is a cache, and the cached resources are returned directly.
   • No caching. (into the actual network request). First obtain the IP of the domain name, the system will first automatically search for the corresponding IP address of the domain name from the hosts file, once found, establish a TCP connection with the server; if not found, the system will submit the URL to the DNS domain name resolution server for IP address resolution

4. Use the IP address to establish a TCP connection with the server (3-way handshake)

5. After the connection is established, Browser builds a data packet (including request line, request header, request body, and appends data such as cookies related to the domain name to the request header), and then sends a request message to the server
   Note: The request body only exists under the POST method, and the common scenario is form submission

6. After receiving the message, the server builds response data (including response line, response header, and response body) according to the request information. The application layer HTTP parses the request header and request body

   • If redirection is required, return the status code 301 or 302 of the HTTP response data, and attach the redirection address in the Location field of the request header, and the browser will perform redirection according to the code and Location;
   • If it is not a redirection, the server will first judge whether the requested resource has been updated according to the value of If-None-Match in the request header. If not, it will return a 304 status code to tell the browser the previous cache It can also be used without returning new data, otherwise, return new data and a status code of 200, and if the browser needs to cache data, add a field to the corresponding header: Cache-Control:Max-age=2000
     The response data is returned to the network process in the order of application layer-transport layer-network layer-network layer-transport layer-application layer
     

7. After the data transmission is completed, TCP waves four times to disconnect. If the browser or server adds Connection:Keep-Alive to the HTTP header, the TCP will always keep the connection, so that there is no need to re-establish the connection when it is transmitted again, which improves the resource loading speed

8. The network process parses the response data after receiving it, and judges the type of the response data according to the Content-type in the response header. If it is a byte stream type (application/octet-stream), the request is handed over to the download manager ; If it is text/html type, notify the browser process to render the acquired document

The browser renders the page part

1.Parse HTML and build DOM tree

Inside the rendering engine, there is an HTML parser responsible for converting the HTML byte stream into a DOM structure. Because the browser cannot parse HTML, it will first convert it into a single character based on the HTML encoding, and use the tokenizer to convert the The byte stream is converted into Token, and each token has its own unique meaning and rule set; then lexical analysis is performed to convert the token into objects, and these objects define their attributes and rules respectively before DOM construction.

• When parsing HTML to build DOM, JavaScript will be blocked (when there are no async and defer attributes)
• JavaScript execution will be blocked by the CSSOM build, that is, JavaScript will not execute until the CSSOM build is complete

2.Build the rendering tree

In order to build the rendering tree, the browser mainly completes the following work:

• Traverse each visible node starting from the root of the DOM tree
• For each visible node, find the corresponding rules in the CSSOM tree and apply them
• Generate a rendering tree based on each visible node and its corresponding style

3.Build the layout tree

The fourth step is to run the layout on the render tree to calculate the geometry of each node

• The rendering tree will indicate which nodes and other styles are displayed, but does not indicate the size, position and other information of each node
• The layout is to determine the width, height and position information of all nodes in the rendering tree:
• Note: The layout tree only contains visible elements, and the head tag and elements with display:none will not be placed in it.

4.Draw each node to the screen

The rendering engine will convert it into a layer tree according to the characteristics of the layout tree, and then split the drawing of the layer into drawing instructions to generate a drawing list. The drawing operation in the rendering process is completed by the compositing thread. Then enter rasterization to generate tiles and bitmaps according to the instructions of the drawing list, and then convert them to pixels on the screen to display the content on the display

Since then, a complete page has been formed