What happens between entering the URL and presenting the page? The seemingly simple question covers a lot of knowledge points, such as OSI 7-layer network model, browser process, cache, browser rendering and so on. Let’s take a look at it in detail.

1. Url validity judgment: the browser determines whether to search the content or visit the url according to the user’s input. If it is the search content, the search content + default search engine search; If the content complies with URL rules, the browser adds the URL protocol to the content to generate a valid URL.

2. Press Enter. When the user finishes typing and presses Enter, the browser displays the loading state.

3. The browser process communicates with the network process. The browser constructs the request line information (request mode Request path protocol and version) and sends the URL request to the network process through inter-process communication (IPC).

4. The network process checks the cache or enters the network to request the URL. After obtaining the URL, the network process searches the local cache. Otherwise enter the network request process.

5. DNS domain name resolution First check the hosts folder on the local host, then check the local DNS server, and then search recursively or iteratively until the root DNS server resolves the IP address and port number of the domain name. If there is no port number, HTTP defaults to 80 and HTTPS to 443.

6. TLS Connection A TLS connection is required for HTTPS requests. The establishment process is:

  • The client requests an HTTPS connection, and the server returns a certificate with a public key.
  • The client generates a symmetric key and encrypts it using the public key provided by the server.
  • The client sends the encrypted symmetric key to the server
  • The client and server use symmetric keys to communicate in ciphertext.

7. At the transport layer, the TCP connection is set up. The TCP connection is set up with a three-way handshake, and the HTTP request header, including the source port number, target port number, and data integrity check number, is transmitted downward. (The browser can establish up to 6 TCP connections, more queuing)

8. Network layer The network layer adds an IP header to the packet, including the source IP address and destination IP address, and then forwards the packet.

9. Data link layer The data link layer adds the beginning and end of the data frame to the data packet and continues the transmission.

10. The physical layer is transmitted to the destination server host through optical fibers or twisted-pair cables.

11. The data link layer of the server receives data frames. The host of the destination server receives data frames from the data link layer, and continues to transmit data frames upward.

12. The network layer of the server receives the data packet. After receiving the data packet, the host of the destination server parses the IP header, identifies the data part, and continues to forward the packet.

13. The server transport layer receives the data segment. After receiving the data segment, the destination server resolves the TCP header, identifies the port number, and transmits the data to the application layer.

14. The application layer receives the HTTP request header and request body.

If a redirect is required, the HTTP response data is returned with status 301 or 302. The location field in the request header is attached with the redirect address, and the browser will redirect based on code and location.

The server determines whether the requested resource has been updated based on the if-none-match value in the request header. If not, 304 is returned, allowing the browser to continue using the cache that exists on local disk or in memory. Cache-control: max-age=6000 if you want the browser to Cache the data, the status code is 200.

The response data is also returned to the browser network process through the application layer -> Transport layer -> Network layer -> Transport layer -> Application layer.

15. Disconnect the TCP connection after the data transfer is complete. The TCP connection is disconnected with four waves. If the browser or server adds Connection:keep-alive to the HTTP header, the Connection is kept open.

16. The network process parses the obtained data packets and determines the type of the response data according to the Content-Type in the response header. If it is a byte stream, hand it to the download manager and the process ends. If it is text/ HTML, the browser process is notified that the document has been obtained and is ready to render.

The browser renderer process receives the document data. The renderer process sends the rendering instruction to the renderer process. After receiving the message, the renderer process will establish a data transmission pipeline with the network process.

The browser updates the page status after receiving a message from the renderer process, the browser updates the page status, including the URL for the address bar, the forward and backward history, and the Web page. The page is still blank.

The rendering process of the browser parses the document and loads sub-resources. The HTML is converted into a DOM Tree by the HTML parser, and the CSS is converted into a CSSOM Tree by the CSS interpreter. Finally, Render Tree is generated. Layering is done through the layout tree, layer trees are generated, different layers are drawn, and finally handed over to the composite thread for processing, and finally the generated page is displayed on the browser.