The process of entering URL to display page


The whole process includes two sub processesNavigationandRendering

1、 Navigation

  1. The user enters the URL and returns
  2. The browser process checks the URL and assembles the protocol to form a complete URL
  3. The browser process sends the URL request to the network process through IPC
  4. After receiving the URL request, the network process checks whether the local cache has cached the request resource, and if so, returns the resource to the browser process
  5. If not, the network process initiates an HTTP request (network request) to the server. The request process is as follows:

    1. DNS resolution, access to the server’s IP address, port

      1. Local domain name server view local cache
      2. Root domain name server
      3. Top level domain name server
      4. Authoritative domain name server
    2. Using IP address and port to build the interface socket of interprocess communication, the end of subsequent TCP end-to-end transmission also refers to the socket
    3. Establishing TCP connection (three handshakes)
    4. The request line, request header and request body are constructed, and the established TCP connection is used to send the constructed request information
    5. The server receives the request information, constructs the response line, response header and response body, and sends them to the client through the established TCP connection
    6. The network process of the client browser receives the response header and response information, and parses the response content
  6. Network process parsing response process

    1. Check the status code. If it is 301 / 302, it needs to be redirected. Automatically read the address from location and perform the fourth step again. If it is 200, continue to process the request
    2. 200 response processing

      1. Check the content type of the response. If it is a byte stream type, the request will be submitted to the download manager, and the navigation process will end without subsequent rendering. If it is of text / HTML type, the browser process is informed that it is ready to render, and the process is ready to render
  7. Preparing the rendering process

    1. The browser process checks whether the current URL is the same as the main domain name of the URL of the previously opened page. If it is the same, the rendering process of the previous page will be reused. If not, a new rendering process is created
  8. Transmit data, update status

    1. When the rendering process is ready, the browser process sends a “submit document” signal to the rendering process
    2. After receiving the signal, the rendering process establishes a “pipeline” to transmit data with the network process
    3. After data transmission, the rendering process sends the “confirm submit” signal to the browser process
    4. After receiving the confirmation signal, the browser process updates the status of the browser interface: security information, address bar URL, forward and backward history status, update web page, etc

2、 Rendering

  1. The rendering process converts the HTML content into something that can be readDOM treeStructure. (the stack is used to realize, when it meets “< p”, it will enter the stack, and when it meets “< / P”, it will exit the stack
  2. The rendering engine converts CSS style sheets into a format that the browser can understandstyleSheetsTo calculate the style of the DOM node. structureRender tree
  3. establishLayout treeAnd calculate the layout information of the elements.
  4. The layout tree is layered and generatedHierarchical tree
  5. Generate for each layerDraw listAnd submit it to the composition thread.
  6. The compositing thread divides the layer into two partsBlock, and inRasterized thread poolConverts a block to a bitmap.
  7. Composition thread sends drawing block commandDrawQuadTo the browser process.
  8. Browser process based on drawquad messageGenerate pageAnd display it on the display.

The process of entering URL to display page