General stage of experience:
1. Browser build request, 2. Lookup cache, 3.DNS resolution (prepare IP and port), 4. Wait for the TCP queue. 5. Establish a TCP connection. 6. The server processes the request. 8. The server responds to the requestCopy the codeDetailed working process:
1. The browser determines whether it is a search or a URL based on the user’s input. If it is a search, the search + the default browser search engine synthesizes a new URL
2. When you press Enter, the page is in loading state. In this state, the content of the previous page is displayed because the content of the page has not been obtained.
3. The browser process builds the request line information GET /index.html HTTP1.1 and forwards the URL to the network process via interprocess communication (IPC)
4. After obtaining the URL, the network process checks whether the URL is cached. If the URL is cached, the network process intercepts the request and returns 200. If there is no cache, the network request flow is as follows:
The default port number is 80. If HTTPS is used, the default port number is 443. HTTPS also needs to establish a TLS connection. Http1. X protocol under the chrome browser, a domain name the next set up six most TCP requests, if the current 10 resources, then the remaining 4 need to be included in TCP to request queue in 4.3 the TCP three-way handshake connection is established, the HTTP request plus TCP header (the source port number, purpose port, 4.4 Network Layer Adds IP header information (source IP address and destination IP address) to the packet and continues the transmission to the lower layer 4.5 The Packet is transmitted to the destination Server through the Physical Layer 4.6 The Network layer of the Destination Server Receives the packet and parses the IP header and data part. 4.7 Destination Server After receiving the data, the host transport layer parses the TCP header and data part and forwards the unparsed data part to the application layer. 4.8 Application layer HTTP Parses the request header and request body. If redirection is required, the server returns 301 or 302. Attach the redirected address to the Location field. If no redirection is required, the server determines whether the resource has been updated based on the if-none-match field. If it has not been updated, it returns 304, telling the browser that the cache resource is still available. Otherwise, return the new data and return 200. If you want the browser to have a Cache, add cache-control :max-age:2000 to the corresponding headerCopy the code5. Network process parsing and response process:
5.1 Check the status code. If the status is 301/302, redirection is required. Go to the Location field to obtain the redirection address, and repeat Step 4. If it is 200, proceed with the request 5.2 Check the response Type Content-Type, if it is byte stream Type (application/... Stream) to the browser download manager, ending the current navigation process. If it is text/ HTML, the browser process is told to get the document ready to renderCopy the code6. The browser process gets the notification, according to whether the current page B is opened from page A, and whether it is the same site as A, if it is opened from page B and is the same site as A, use the original renderer process to open page B, otherwise create A separate renderer process
7. The browser process sends a “submit document” message to the renderer process. After receiving the message, the renderer process will establish a channel with the network process to transfer the file data
8. After receiving the submission message from the renderer process, the browser process will update the browser’s forward and backward historical status, security status, URl information in the address bar, and Web page content, and the Web page will be blank
9. The rendering process parses the document page and loads sub-resources, parses HTML into DoM tree and CSS into CSSOM Tree, executes javascript and draws the page layout, elements, locations, colors and so on, and finally displays them on the screen.
10. When the page is generated, the renderer process will send a signal to the browser process, and the browser will stop loading the TAB animation of the page, as shown below:
