Supplement:

  • 1: the browser process sends a URL request to the network process
  • 2: After receiving the URL request, the network process initiates a network request. Then the server returns HTTP data to the network process, which parses the HTTP response header data and forwards it to the browser process
  • 3: After the browser process receives the response header data from the network process, it sends a CommitNavigation message to the renderer process, which carries the basic information of the response header and so on.
  • 4: After receiving the CommitNavigation message, the renderer process is ready to receive HTML data by directly establishing a data pipeline with the network process
  • 5: Finally, the renderer will “confirm submission” to the browser process, which tells the browser process that I am ready to accept and parse the page data
  • 6: Finally, the browser process updates the page status

About the keep alive

Keep-alive is to solve the problem of low connection efficiency. In http1.0 era, HTTP requests are in the form of short connection, that is, each request for a resource requires the establishment of a connection with the server, transmission of data, and disconnection. Usually, the time for the establishment and disconnection may exceed the time for data transmission. The efficiency of this short connection is unusually inefficient. Keep-alive (keep-alive) : Keep-alive (keep-alive) You can take a long connection as a pipeline, an HTTP request is done, will not close the connection, the next request can reuse the connection, it connect and disconnect the time, but they request is in accordance with the order, which is adaptable to the rules of the IP + port resources can reuse the connection, this answer the above mention this problem. However, using keep alive – the same problems, such as a page might be 100 images material, assuming that these pictures below material is stored in the same domain name, if only reuse a HTTP pipeline, then transmit 100 pictures of material is also very time consuming, it appeared the same time the demand of the concurrent connections server, As mentioned in the article, only 6 requests can be made under the same domain name at the same time, which can greatly improve the request efficiency. Why 6 requests instead of more? It is for the sake of server performance. If there are unlimited connections at the same time, the server may be overwhelmed.

Browser cache:

CSS’s Transform to animate, which avoids the rearrangement and redraw phases and executes the compositing animation directly on the non-main thread. This is the highest efficiency, because it is composed on the non-main thread, does not occupy the main thread resources, and avoids the layout and drawing two sub-stages, so compared with redraw and rearrangement, composition can greatly improve the drawing efficiency.