This article was originally published at: github.com/bigo-fronte… Welcome to follow and reprint.

Multi-process/multi-thread model

Main process types

  1. Browser process: There is only one main browser process, which is used for process and resource scheduling and control.
  2. Renderer: Basically every browser TAB is a renderer, which is merged into a single process when memory is tight
  3. GPU process: users draw 3D graphics and animation
  4. Third-party plug-in processes: The browser has many plug-ins that run in third-party plug-in processes to prevent the plug-in process from affecting other processes such as the main process

Open the Chrome Task Manager window as shown below:

The main thread type of the renderer process

  1. Renderer Thread: The main thread of the renderer process
    1. Parsing HTML, CSS, building DOM and CSSOM trees, layout and drawing, etc
    2. When HTML parses ascript tag, it parses the Javascript script inside the script (Chromium uses V8, Safari uses JavaScriptCore), blocking HTML parsing
  2. I/O thread
    1. Responsible for forwarding communication messages between the renderer process and the browser main process
    2. Responsible for network resource request loading, such as UI rendering thread parsing to link tag, IMG tag, script tag loading external resources will be notified to the I/O thread forward load resource message to the browser main process network thread
  3. Other threads
    1. Worker threads (Web Worker, service Worker)
    2. Raster thread: When layer trees are created and the drawing sequence is determined, the raster thread is turned into bitmaps
    3. Compositor threads compose a render Layer bitmap into a bitmap

The thread status can be seen in the browser:

Rendering process

The following example looks at the rendering process in conjunction with the Performance panel

// parsing.html <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, < span style>. Test1 {color: pink; color: pink; } < / style > < link href = "https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.css" rel = "stylesheet" / > < link rel="stylesheet" href="./parsing.css" /> <style> html, body { margin: 0; padding: 0; } </style> <script> console.log("test1"); </script> </head> <body> <div class="test1">123</div> <style> .test2 { color: purple; } </style> <div class="test2"> <img src="http://i1.cmail19.com/ei/j/2A/BC7/816/202259/csimport/actionrocketdarkmodelogooutlinev2_0.png" alt="cdn" /> </div> <div class="test3">456</div> <style> .test3 { color: green; } </style> <script> console.log("test2"); < / script > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/fastdom/1.0.10/fastdom.js" > < / script > < div class="test4">789</div> <style> .test4 { color: blue; } </style> <script async="true"> console.log("test3"); </script> <div class="test5">10</div> <style> .test5 { color: orange; } </style> </body> </html>Copy the code
// parsing.css
.test1 {
  background-color: green;
}
Copy the code

First render process analysis

Parsing

The UI rendering thread starts parsing the HTML tags into a DOM tree when it gets the HTML document. The UI rendering thread also launches a Preload Scanner during Parsing to scan the DOM tree being formed for tags or attributes that load external resources, such as img or link. If found, the I/O thread is told to forward the request to load external resources to the web thread of the browser’s main process for resource loading.

Line 0-21 in the Parsing HTML document

If there were no script tags to block parsing, the HTML process would override the whole HTML

Parsing to identify external resources

The Preload Scanner detects external resources throughout the HTML document and makes a pre-request, not only to the network resources in line 0 to 21 of the HTML document. In the following image, the link tag is introduced to Parsing

JavaScript

Parsing any tag or attribute containing JavaScript code, such as script, that the UI rendering thread encountered during Parsing, immediately stopped Parsing the JavaScript code, and called V8 to parse and execute the JavaScript code. Because JavaScript code has DOM API operations that change the DOM tree, such as appendChild, removeChild, etc., that modify the layout of HTML elements, or dom.style = “color: red” that operate on HTML corresponding CSS styles.

Parsing with the script tag doesn’t necessarily mean that you load the script tag and then execute the JavaScript code in the script. The script tag’s defer and async attributes change the behavior of Parsing script tags encountered during Parsing.

Normal execution: No async and defer properties

The JavaScript download and execution can block parsing

The HTML code above is the process

  1. The Parse HTML 0 ~ 21 rows

2. Parse HTML 22 to 42 lines

  1. The Parse HTML 43 ~ 1 line

Have async attributes

The asynchronous download of JavaScript does not block Parsing, but the code is executed immediately after the download to block parsing

Modify the sample HTML to add the async property to the script tag that loads fastDOM:

Re-parsing performance revealed that the Parsing process was parallel to that of downloading the script, but it was still influenced by the timing of JavaScript execution

Have the defer attribute

Asynchronous downloading of JavaScript did not block parsing, and the code execution was placed after DOMContentLoaded

Modify the sample HTML by adding the script tag that loads Fastdom to the defer attribute:

Parsing performance again revealed that the process of Parsing was parallel to that of downloading the script, and that the Parsing could be done at the end of downloading the script and at the beginning of executing the code

Style

After the HTML DOM tree is parsed, a style calculation is performed: in this process, a CSSOM tree is built by calculating which elements apply which CSS rules based on the matching selector (such as.header or.footer >.confirm-button). If you change the HTML structure of an element, or the CSS attribute value, it triggers a recalculation of the style. If CSS selectors are too complex to write, this process can take longer.

Build the basic CSSOM

Recalculate the CSSOM tree

Layout

The DOM tree, the CSSOM tree, is already established, but it is only a description of the object itself, without knowing the actual location of the object if it is to be rendered on the page. So there is this Layout process according to the DOM tree, CSSOM tree node location information calculation, integration, build a Layout tree.

Set up the layout tree

Update the layer tree

Ensure drawing order

Paint

With a Layout tree, start drawing bitmaps from the Layout tree, but since CSS has z-index, float, etc., changing the document flow can cause vertical elements on the screen to overlap, elements need to be stacked in vertical Order first. If the elements in the same layer are vertically oriented, the elements are drawn in HTML order. The drawing process is also called Raster, and the result after Raster is a Render Layer bitmap.

View Paint drawing timing

View the Paint drawing process

Check the Paint Instrumentation option in the upper left corner

Composite

If an HTML element uses scaleZ, will-change, etc., a new Render Layer will be created to render the element. The cost of natural Style, Layout, Paint, etc., will be much smaller after upgrading to a separate Render layer. However, after the increase of the render layer, the bitmap of the render layer needs to be combined into a bitmap and finally displayed on the screen, so the render layer needs to be Composite.

Elevate the render layer separately

Add the transform: scaleZ(0) CSS attribute to an element

Render update process analysis

The site can see which CSS properties trigger which process: csstriggers.com/

Relayout

The user triggers an event to start JavaScript manipulation of the DOM, change the geometry of the element (such as width or margin-left), trigger the Style process to recalcate the Style rules, trigger the Layout process to generate a new Layout tree, trigger the Paint process to draw the bitmap, Finally, the Composite process is triggered to combine multiple bitmaps into one bitmap.

Repaint

The user triggers the event and executes JavaScript to change the DOM and the appearance attributes of the element (such as color and background). The Layout process is the same as Relayout except that it does not trigger the Layout process.

Composite

The user triggers an event to start executing JavaScript to change the DOM. Changing elements raises the properties of the render layer (such as scaleZ, will-change), and Layout and Paint are executed in a separate render layer with no performance cost. The render layer of the main document stream skips Layout and Paint and is composed directly with the separate render layer.

How to improve rendering performance

Reduces long JavaScript execution

Not only did the initial rendering mentioned above break with JavaScript execution, but also the Style and Layout processes in the render update were interrupted by JavaScript execution. Parsing, Style, and Layout can be prevented if JavaScript is executed for a long period of time, and the user may find that the page Style, Layout, and operations are unresponsive during that time.

Reduce the number and complexity of style selectors

The Style process depends on CSS selector complexity, and if CSS selectors are too many and too complex, it can affect the speed of CSSOM calculation.

Avoid large, complex layouts

Parsing speed and Layout speed were positively correlated with the number of HTML tags, nesting levels, and complex layouts. If Relayout is triggered frequently, it is costly, and Relayout basically works on the entire HTML document.

Appropriate use of lifting elements render layers

When animating, will-change should be properly used to elevate the rendering layer of animation elements away from the rendering layer of the main document flow to avoid frequent changes to the layout of the main document flow, resulting in wasted performance of Relayout and Repaint.

reference

Rendering Performance

Taobao FED | tao front-end team

The stacking context – CSS: Cascading Style Sheets | MDN

Welcome everyone to leave a message to discuss, wish smooth work, happy life!

I’m bigO front. See you next time.