The overall process is shown in the figure above, which can be roughly described as:

  1. The user enters a request from the browser
  2. A network process initiates a URL request
  3. After the server responds to the URL request, the browser process prepares the renderer process
  4. When the renderer is ready, submit the page data to the renderer (submit document phase)
  5. After receiving the document information, the rendering process parses the page and loads sub-resources to complete the page rendering

Display detailed process from entering URL to page

User input

After a user enters a keyword in the address bar, the address bar determines whether to search for the content or request the URL based on the keyword.

  • If it is determined to be a search content, use the default search engine in the address bar and synthesize a new URL with search keywords (search keywords after Q).https://www.google.com/search?q=google&xxxxxx
  • If the content complies with THE URL rule, the URL bar is called a complete URL based on the entered contentwww.baidu.com => https://www.baidu.com/

After you enter the keyword and press Enter, the icon on the label changes to Loading. In this case, the page is not replaced with the target page immediately. You need to wait for the document submission phase to end before the page content is replaced. (See below)

URL Request process

Page request resource process, browser process through IPC(inter-process communication) URL request to the network process, the network process received the real URL request. The specific process is as follows:

  1. Check whether cached resources exist locally. If yes, return to the browser process.
  2. No, just make a network request.
  3. DNS resolution to obtain the server IP address for the requested domain name.
  4. If HTTPS is requested, a TLS(Secure Transport Layer Protocol) connection is required.
  5. Establish a TCP connection with the server using an IP address. (A maximum of 6 connections can be established in the same domain at the same time, and more connections can be queued) (Add corresponding headers through the transport layer, network layer, etc.)
  6. After the connection is established, the request header, row and other information is built, and relevant data such as cookies are appended to the request header and then sent to the server
  7. After receiving the request information, the server generates response data according to the request information and sends it to the network process. (The response data is returned to the network process in the sequence of application layer-transport layer-network layer-transport layer-application layer)
  8. After receiving the response line and header, the network process parses the response.
  9. If the status returned is 301 or 302, the browser needs to redirect to another URL and start all over again.
  10. The browser looks at the response headerContent-TypeField determines the data type of the response body; ifapplication/octet-streamByte stream type. The browser handles the request according to the download type. The request is submitted to the browser’s download manager, and the process ends. In the case of HTML, proceed to the next process: prepare the rendering process

Prepare the render process & submit the document

Different render process is used for pages with different main domain names, and the same render process is used for pages with the same main domain names.

  1. Once the rendering process is ready,Browser processaSubmit the documentThe news.
  2. Once received, the renderer will establish a pipeline with the network process to transfer the data.
  3. When the transfer is complete, the renderer process returns a “confirm submit” message to the browser process.
  4. After receiving the confirmation message, the browser process updates the browser interface status (security status, URL, forward and backward historical status) and updates the Web page. (The Web page is blank.)
  5. The navigation process ends and the rendering phase enters.

Rendering phase

According to the time order of rendering, the pipeline can be divided into: DOM tree construction -> style calculation -> layout -> layering -> drawing -> block -> rasterization -> composition and other stages.

The flow of each stage is as follows: receive input -> process -> output

Build a DOM tree

Receive HTML files -> HTML parser parses -> outputs tree deconstructed DOM

Style calculation

General flow: Accept CSS text -> calculate the specific style of the DOM node -> output the dom style after calculation

The specific steps are as follows:

  • Stylesheets receives CSS text and converts it to a browser-readable structure: stylesheets CSS three sources: inline, external introduced, and style

  • Transform property values in stylesheets to standardize them

body { font-size: 2em } p {color:blue; } div {font-weight: bold} // standardize the body {font-size: 32px} p {color: RGB (0,0,255); } div { font-weight: 700}Copy the code
  • The specific style calculation of each node in the DOM tree follows the two rules of CSS inheritance and cascading, as shown in the following figure:

All child nodes inherit the style of the parent node. Output the style of each DOM node after the calculation (saved in the ComputedStyle deconstruction, available under the elements -> computed tag)

layout

After the above process, we have the DOM tree and the style of the elements in the tree, but the position of each element is not determined enough to display the page.

Chrome in the layout phase of the task: create a layout tree and layout calculation.

  • Create a layout tree to traverse the visible nodes in the DOM and add them to the layout tree. Invisible nodes are ignored. For example, the contents of the head tag are displayed as None

  • Layout calculation

Calculate the coordinate position of the node of the layout tree, calculate the result of the operation will be written into the layout tree, so the layout tree is both the input content and output content; This design doesn’t make sense. Chrome is in the process of refactoring, and LayoutNG, the next generation layout system, is trying to separate input and output.

layered

Instead of drawing immediately after the layout is completed, the rendering engine creates a layer for a specific node and a corresponding LayerTree. You can see the layering of the page in the Layers TAB under developer Tools.

  • Relationship between layout tree and layer tree

    As can be seen from the above figure, not every node has a layer, if not, it belongs to the layer of its parent node.

  • When does the rendering engine create a new layer for a particular node?

  1. Properties that have a cascading context are promoted to a separate layer.Cascading context

    The cascading context gives HTML a three-dimensional concept, vertically distributed along the Z-axis in terms of its own attribute priority.
  2. Places that need to be clipped will also be created as layers. Clipping occurs when text content is too large for the display area. The rendering engine creates a separate layer for the text section, and if a scroll bar appears, the scroll bar is promoted to a separate layer.

Layer to draw

Drawing example: I give you a piece of paper, draw a circle with a blue background and a red center, and then draw a green triangle on the circle. How do I draw it?

  1. Draw a blue background
  2. Draw a red circle in the middle
  3. Draw a green triangle on the circle

Layer drawing is similar to breaking up a layer into many small drawing instructions and making a list of instructions in order to draw. (Each element requires a separate drawing instruction for its background, foreground, and border.)

Raster operation

The draw list is used only to record the draw order and instructions; the actual drawing is done by the compositing thread in the rendering engine. As shown above, when the drawing list is ready, the main thread submits it to the composite thread.

Some layers are so large that the page takes a long time to scroll to the bottom. Through the viewport, the user can only see a small portion of the layer, which would be expensive and unnecessary to draw all of the layer content.

What about synthetic threads? The composition thread will divide the layer into tiles, usually of (25,256,512512) size.

Rasterization (converting blocks to bitmaps)

The rasterization process uses the GPU to speed up the generation, and the generated bitmap is retained in GPU memory. (GPU operations in the GPU process, rasterization in the rendering process, this process involves cross-process operations.)

Composition and display

When all the tiles are rasterized, the compositing process generates a command to draw the tiles, and then submits the command to the browser process.

The viz component in the browser process receives the DrawQuad command, draws the page to memory based on its contents, and finally displays the memory to the screen.

Complete rendering process summary

  1. The renderer transforms the HTML content into a readable DOM tree structure.
  2. The rendering engine translates CSS styleSheets into styleSheets that browsers can understand, calculating the style of DOM nodes.
  3. Create a layout tree and calculate the layout information for the elements.
  4. Layer the layout tree and generate a hierarchical tree.
  5. Generate a draw list for each layer and submit it to the composition thread.
  6. The composite thread divides the layer into blocks and converts the blocks into bitmaps in the rasterized thread pool.
  7. The composite thread sends the DrawQuad command to the browser process.
  8. The browser process generates the page from the DrawQuad message and displays it on the monitor.

Rearrange, redraw, synthesize

  • rearrangement

    Updating element geometry attributes is the most expensive
  • redraw

    Update element color
  • synthetic

    Direct composition, avoid rearrangement redraw.

Some question

  • If there are two tabs on the same site and I write an infinite loop on the page A, the page will be stuck. Is the page B also stuck?

    Multiple pages share the same render process, which means that multiple pages share the same main thread. All tasks on the page are executed on the same main thread, including rendering process, JavaScript execution, response to user interaction events, etc. However, if an infinite loop is executed within a TAB page, This means that the JavaScript code will always hog the main thread, which will cause other pages to be unable to use the main thread, making all pages unresponsive!

  • If downloading the CSS file blocks, will it block DOM tree synthesis? Does it block the display of the page? It does not block the DOM tree synthesis, and when the HTML is converted to the DOM tree, the file request is found in the network process to request the file, and the renderer continues parsing the HTML. If the resource is blocked, it will wait until the network times out, and the network sends an error response, and the rendering process continues the cascading style calculation.

  • Both JS and CSS can block DOM parsing

  1. When the first data of the HTML page is received from the server, the DOM parser starts to work. During parsing, if a JS script is encountered, it looks like this:

    <html>
    <body>The Denver nuggets<script>
        document.write("--foo")
        </script>
    </body>
</html>
Copy the code

    The DOM parser then executes the JavaScript script, and when it’s done, continues parsing.

  2. The second case is a bit more complicated, where we replace the inline script with a JS external file, as shown below:

    <html>
    <body>The Denver nuggets<script type="text/javascript" src="foo.js"></script>
    </body>
</html>
Copy the code

    In this case, when JavaScript is parsed, DOM parsing is paused and the foo.js file is downloaded. When the download is complete, the js file is executed and the DOM parsing continues. This is why JavaScript files block DOM rendering.

  3. For the third case, look at the following code:

    <html>
    <head>
        <style type="text/css" src = "theme.css" />
    </head>
    <body>
        <p>The Denver nuggets</p>
        <script>
            let e = document.getElementsByTagName('p') [0]
            e.style.color = 'blue'
        </script>
    </body>
</html>
Copy the code

    When I access the style of an element in JavaScript, I have to wait for the style to be downloaded before I can proceed, so CSS blocks DOM parsing in this case as well.

  • What are the frames of the renderer process? Take a movie, for example. Usually, a movie has a frame rate of 24, which means that it switches 24 frames every second, and each frame is a frame.

    Now that we understand what frames are, let’s go back and look at our page. Since most current devices have a screen refresh rate of 60 times per second. So if the page has an animation, or a gradient effect, or the user is scrolling, the browser needs to render the animation at least as often as the refresh rate, which is 60 updates per second, so we can calculate that the budget for generating each frame is (1/60) of a millisecond, That’s just over 16 milliseconds (1 second / 60 = 16.66 milliseconds). Beyond 16 milliseconds, the frame rate drops and the screen shakes, often referred to as stutter, negatively affect the user experience.

    Therefore, if you want to ensure a smooth picture, you need to minimize the rendering time of each frame, so local update pipeline is very important, can greatly reduce the time consumed in processing each frame.

The resources

Working principle and practice of browser