1. The user enters a URL and the address bar determines whether the keyword is the search content or the requested URL address

    • If you are searching for content, the address bar will use the browser’s default search engine
    • If the input content complies with the URL rules, the address bar will combine the content with the protocol according to the rules to synthesize the complete URL

  2. Press Enter in the address bar and the browser performs beforeUnload. Befoerunload allows you to clean up data and confirm to leave. For example, if there is an unsubmitted form, you can unnavigate and the browser does not perform any subsequent tasks

  3. When the current page does not listen to befoerunload or allow execution, the browser icon changes to loading state. In this case, the browser page is still opened before and is not replaced immediately. This is because the page content will be replaced after the document submission stage.

  4. After entering the network resource request process, the browser process sends the URL request to the network process through interprocess communication (IPC), and the network process initiates the real URL request.

  5. The process for the network process to initiate a request: The network process checks whether there are cached resources locally and returns cached resources to the browser process. If no, enter the network request process, perform DNS resolution first, and obtain the server IP address corresponding to the domain name. If the request is HTTPS, set up a TLS connection

  6. Use IP address and the server to establish TCP connection, after establishing the connection, the browser will build the request line, request header, request body, and the domain name related Cookie data to add to the request header, send request information to the server;

  7. When it receives a request header from the server, the network process parses it,

    • When the status code is 301 or 302, the server asks the browser to redirect to another URL. You can obtain the redirect address from the Location field in the request header, and then make a new HTTP or HTTPS request.
    • When the status code of the request header returned by the server is 200, the request can continue to be processed

  8. The network process sends the response data (row, header, body) to the browser process via interprocess communication (IPC)

  9. The browser process determines the Type of data returned by the server based on the content-type field in the response header, for example, content-Type: text/ HTML (HTML page). Applaction/OCtet-stream (byte stream type)

  10. Render process preparation:

    • By default, browsers create a new renderer for each page opened, but there are exceptions. When pages belong to the same site, they share a renderer. The same site is defined by the same domain name and protocol, and includes all subdomain names and port numbers under the root domain name

      The following are unified sites

      time.geekbang.org www.geekbang.org www.geekbang.org:8080

    • After the rendering process is ready, the document cannot be parsed immediately because the data is still in the network process and has not been committed to the rendering process, so the next step is to commit the document

  11. Document submission stage: the browser process submits the corresponding data accepted by the network process to the renderer process, and the specific process is as follows

    • When the browser process receives the response data from the web process, it wants the renderer process to send a “submit document” message
    • After receiving the submit document message, the renderer establishes a data pipeline with the network process
    • When the data transfer is complete, the renderer sends a confirmation commit message to the browser process
    • After the browser receives the confirmation submission, it updates the URL address preferred, the historical status of the forward and backward, the Web page, and the security status

  12. This explains why a new page doesn’t load immediately after entering a URL

  13. This is the end of the navigation phase

  14. Enter the rendering stage: because the rendering stage is very complex, it is divided into different sub-stages, with different sub-stages completed, called it the rendering pipeline

  15. The rendering pipeline is divided into the following sub-stages: DOM tree construction, style calculation, layout stage, layering, drawing, block, composition, rasterization; Each stage needs to focus on the content: input content, processing stage, output content

    • Build the DOM
      • Because the browser cannot recognize HTML directly, it needs to be parsed into a DOM tree through the HTML parser and saved in memory. You can add, delete, change and check the DOM tree through JS
      • In this stage, the input content is HTML, and the processing stage is HTML parser parsing; The output is a DOM tree
    • Style calculation
      • Browsers don’t recognize CSS text (link, style, inline style) and need to convert to stylesheets
      • Font-size: 2rem = “font-size: 20px;
      • Figure out the style of each node in the DOM tree: inheritance and cascading styles are involved
    • Layout phase: Calculates the geometry of the visible elements in the DOM tree
      • Create layout tree: A layout tree that contains only visible elements
      • Layout calculation: Calculate the coordinates of each node in the layout tree. At this stage, the layout tree is both the output and the input, which is unreasonable because the input is not separated from the output
    • Layering: Number of layers created
    • Drawing:

  16. Why does reducing rearrangement redraw improve Web performance?

    • First of all, the rendering stage is very complex, so the rendering engine divides it into different sub-stages: DOM creation, style calculation, layout stage, layering, drawing, chunking, rasterization, and composition
    • Reducing rearrangement redraw is to reduce the number of times these subphases work and reduce the footprint of the browser process
    • Rearranging and redrawing multiple times will increase the amount of work per frame, and the page will get stuck when the time of each frame exceeds the time (16ms)
    • Reduce rearrangement and redrawing methods
      • Use the transform attribute whenever possible to change the geometry of an element
      • Try to change styles using class instead of style
      • Dom attribute read/write separation
      • Batch dom properties
      • fragment