I. Brief answer:

1. The browser queries DNS to resolve the IP address corresponding to the current URL
2. Establish a TCP connection (three-way handshake)
3. The browser sends an HTTP request
4. The server receives the REQUEST, responds to the HTTP request, and returns a packet
5. The browser receives the return message and performs rendering (DOM tree). CSS Tree, Render-Tree, layout, redraw
6. Close the TCP connection (four waves)

Second, detailed answers

1. The DNS

One IP address corresponds to one server, and a domain name may correspond to multiple IP addresses. The domain name resolution server assigns one IP address to the user based on certain rules. For example, www.baidu.com(domain name)=>DNS resolution =>11.22.33.444(IP address)

Lookup procedure (DNS pre-resolution)
  1. toBrowser cache, if none, the next step
  2. toSystem cacheIf not, go to the next step
  3. toThe routerIf not, go to the next step
  4. toIPS(Operator)Look for the DNS cache, if none, go to the next step
  5. toRoot DNS server= >Top-level Domain name serversLook for
2. Establish a TCP connection/three-way handshake
  1. The client sends a message to the server (Hello, this is the client)
  2. Server response (Hello client, this is the server, I can receive your message)
  3. Client response (Hello server, you can receive my message, I can receive yours)

Three handshakes to confirm that two-way communication is normal three handshakes and four waves

3. The browser sends an HTTP request and the server responds

After establishing the TCP link, you should communicate with the server formally

  1. The browser sends an HTTP request based on the resolved IP address and port number. An HTTP request generally includes header and body. Header includes the request mode (GET, POST) and the request protocol (HTTP, HTTPS), request address IP, cache cookie, request type, etc. Body is the parameter of our request
  2. The server returns a request packet to the browser based on the request address and request parameters
  3. Get generates one TCP packet, and POST generates two (the HEADER and data are sent directly for GET request, the header is sent first, the server returns 100, then the data is sent, the server responds with 200 and returns the body).
Status Code(Status Code)
  • 1xx: indicates message, request received, waiting to continue operation
  • 2xx: The request succeeds
  • 3xx: redirection, continue to complete the request
  • 4xx: the client error, the connection to the server is successful, but the request has syntax error or parameter error, cross-domain, etc., the request cannot be implemented
  • 5xx: The server is abnormal
4. Browser rendering
After the browser gets the HTML file, it begins to render the page, rendering order and rules:
  1. DOM: Parse HTML code to construct a DOM tree
  2. CSSOM: Parsing CSS code to construct CSSOM-CSS tree
  3. Render-Tree: Combined with DOM,CSSOM generates Render-Tree
  4. Layout: Locate nodes based on the node relationship and CSS
  5. Draw: Draw a page based on calculated good information
5. Close the Tcp connection by waving four times

  1. First wave: The application process of the Client sends the TCP connection to release the packet segment (FIN = 1, seq = U), stops sending data again, closes the TCP connection, enters the FIN-wait-1 state, and waits for the confirmation from the Server.

  2. Second wave: After receiving the connection release packet, the Server sends a acknowledgement packet (ACK = 1, ACK = u + 1, seq = v), and the Server enters the close-wait state. At this time, TCP is in the half closed state. The connection between the Client and Server is released. Procedure

  3. Third wave: The Server sends a last-ACK (FIN = 1, ACK = 1, SEq = w, ACK = U + 1), and the Server enters the last-ACK (last-ACK) state. Wait for the Client to confirm.

  4. Fourth wave: After receiving the connection release packet from the Server, the Client sends an acknowledgement packet (ACK = 1, SEq = U + 1, ACK = W + 1). The Client enters the time-wait state. The TCP is not released. The Client enters the CLOSED state only after the timer is set at 2MSL.

Three handshakes and four waves