Front-end performance optimization (15)

Simplifies drawing complexity and reduces drawing area

Drawing, is the process of populating pixels that will eventually appear on the user's screen. Typically, this process is the most time-consuming part of the entire rendering pipeline and is therefore the one that is most needed to avoid.

If the layout is triggered, then the next draw _ _ will be triggered. Because changing the geometric properties of an element means that all pixels of the element need to be re-rendered!

In addition, if you change the non-geometric properties of an element, you may also trigger the drawing, such as the background, text color, or shadow effect, although changes to these properties do not trigger the layout. The entire rendering pipeline will look like the following:

Use Chrome Devtools to quickly locate performance bottlenecks in the drawing process

With Chrome devtools, you can quickly locate the area that is being drawn on the current page. Open Devtools and press ESC on the keyboard. In the pop-up panel, select the Rendering tab, and then select Show Paint rectangles:

When this option is turned on for Chrome, a green box pops up on the screen whenever a drawing occurs on the page. If you see the green box covering the entire screen, or covering some areas that you think should not be drawn, then it is likely that the drawing will be optimized and you will need to look at the details of this drawing.

There's an option in Chrome devtools that lets you see more details about the drawing: the Paint profiler. Open the Paint Profiler by opening the Devtools Timeline tab and selecting the "Paint" option at the top of the panel. It is important to note that you must only turn on this option when you need to analyze the drawing problem. Because running the paint profiler itself also consumes browser resources, it can have a little impact on the results of page performance. It's best to enable it on demand, rather than keep it open.

Once you have completed the above settings, you can analyze the page for rendering performance. Run the timeline recording feature and you will be logged into a fairly detailed drawing analysis information. Click on the paint record on a record of a frame and you will see the result of the drawing of this frame:

Clicking Paint Profiler Opens a view that shows which elements were drawn, how long it took, and each specific paint call:

This parser allows you to understand the plot area and the complexity of the drawing (which is reflected in how long it takes), both of which are exactly where you can optimize the drawing (of course, we must first try to avoid the drawing and to optimize the drawing if unavoidable).

Raise the drawing layer of a moving or gradient element

Drawing is not always done in an in-memory single-layer screen. In fact, the browser will, if necessary, draw a frame into a multi-layered picture, and then merge the layers into a single picture to display on the screen.

The advantage of this rendering is that elements that use tranforms to move the effect will be drawn normally without triggering the drawing of other elements. This approach and thought are consistent with image processing software (such as Sketch/gimp/photoshop), which can be manipulated on a single layer in the image, and finally merge all layers to get the final image.

The best way to create a new render layer in a page is to use CSS properties will-change , which are supported by Chrome/opera/firefox. transformwhen used together with attributes, a new composition layer is created:

.moving-element {  will-change: transform;}

For browsers that do not currently support will-change properties but support the creation of render layers, such as safari and Mobile Safari, you can use a 3D transform property to force the browser to create a new render layer:

.moving-element {  transform: translateZ(0);}

However, it is important to note that you do not create too many render layers. Because each new render layer is created, it means new memory allocations and more complex layers of management. For more information on this, refer to prioritizing the use of Render layer merge properties, control layer count.

If you have put an element in a new render layer, you can use Devtools to confirm that it really improves rendering performance. Don't blindly create a rendering layer, be sure to analyze its actual performance.

Reduce drawing Area

Sometimes even though the element is lifted to a separate render layer, rendering is still necessary. One of the more challenging aspects of the rendering process is that the browser will combine the rendering tasks of two adjacent areas, which will cause the entire screen area to be drawn. For example, you have a header at the top of your page that has a fixed position, and an area at the bottom of the screen is being drawn, and the entire screen will be drawn.

Note

• On a higher DPI screen, fixed-positioned elements are automatically promoted to a rendering layer of their own. However, this is not the case with low DPI devices, because the elevation of this render layer makes the font rendering way to grayscale (see: [Text Rendering] (http://www.html5rocks.com/en/tutorials/ internals/antialiasing-101/?redirect_from_locale=zh#toc-text-rendering), we need to manually implement a render layer upgrade.

Reducing the drawing area often requires a precise design of the animation effect to ensure that there is not too much overlap between the respective drawing areas, or to avoid animating some areas of the page.

Simplifying the complexity of drawing

Some of the problems involved in drawing are relatively more expensive. For example, drawing a blur effect (such as a shadow) is more time consuming than drawing other effects, such as a red box. However, in terms of CSS, these issues are not all obvious: background: red and box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); may seem to have little difference in performance, but that is not the case.

The paint profiler mentioned above can make you realize whether you should ask yourself if there are other ways (like other style modification schemes) to achieve the same effect, but you can achieve better performance.

You want to avoid the drawing as much as possible, especially in the animated effect. Because the time budget of 10 milliseconds per frame is generally insufficient to complete the drawing work, especially on mobile devices.

Front-end performance optimization (15)