1. The DNS

  • Search in the browser DNS cache
  • Search in the OPERATING system DNS cache
  • Read the hosts file of the system and check whether the corresponding IP address exists
  • Returns the resolved IP address to the browser

2. Establish a TCP connection (three-way handshake)

  • First handshake: The client sends oneSYNThe packet goes to the server and waits for a reply from the server.
  • Second handshake: The server receives the handshake from the clientSYNAfter the package sentACKReply and return one at a timeSYNPackage to enter the ready connection state.
  • Third handshake: The client receives the handshake returned by the serverSYN+ACKAfter the packet, it confirms that the server side has received the request and is ready to connect, and sends it to the server sideACKThe package. Connection successful. Three handshakes complete.

3. The client sends an HTTP request

  • An HTTP request consists of a request header and a request body. The request header contains vital information, including the request method (GET/POST), destination URL, and protocol (HTTP/HTTPS/FTP…). , whether the returned information needs to be cached, and whether the client sends cookies.

4. The server processes the request and returns an HTTP packet

  • After receiving the HTTP request from the client, the service searches for the resource requested by the client and returns a response packet to the browser. The response packet contains a status code. Procedure The status code consists of three digits, among which 200 is common. OK indicates that the request is successful. 301 indicates a permanent redirect. After the 301 status code is returned, the response packet also carries the redirect URL. After receiving the REQUEST, the client changes the URL and sends the request again. 404 Not Found The resource requested by the client cannot be found.

5. The browser renders HTTP packets from the server to the page

  • Process HTML tags and build DOM trees.
  • Process CSS tags and build CSSOM trees.
  • Merge the DOM and CSSDOM trees into a render tree.
  • Layout according to render tree to calculate geometric information for each node.
  • Draw the individual nodes to the screen.

6. Disconnect (wave four times)

  • When the page is rendered, either the client or the server will request disconnection at any time. Four waves will occur, and the basic steps are the same as three retrieves, but the second wave will return first because the data may still be in transfer at the time of disconnectionFINPackage and backACKThe connection confirmation packet is disconnected. So it becomes four steps.