How to avoid useless render rendering

This article is translated from the Html5rock article, the English original address of the article is given at the end.

The paints I translated into render rendering, I am so understanding.

Begin

Drawing (rendering) a Web site or an application element is expensive for browsers, it has a negative impact on the efficiency of the runtime, and in this article we'll go through it quickly, which leads to the creation of events in the browser and how to avoid unnecessary drawing in your future work.

Draw (Render): An ultra fast trip

One of the main tasks of the browser is to convert the DOM and CSS into pixels and draw them to the screen, which is a complex sequence of processes. The browser first reads the HTML tag and creates the DOM tree, and it does a similar job with CSS, reads the CSS and creates the Cssom tree, merges the two, and eventually we can render the pixel to the screen based on the merged structure.

The drawing process itself is very interesting. In Chrome, the merged DOM tree and CSS tree are raster with a software called Skia. If you've ever used canvas APIs, you'll find their APIs very similar.

Not only MoveTo, LineTo and other APIs, but also some of the advanced APIs are very similar. In essence, all elements that need to be drawn are extracted into a collection that can be executed by Skia, and a stack of bitmaps is output after execution. These bitmaps will be uploaded to the GPU and the GPU will help them assemble and eventually output to the screen.

Skia's workload is directly influenced by the style you apply on the element. If you use the style algorithm of the element to be very complex then, it will greatly aggravate Skia's work. You can refer to this article article on the How CSS affects page render weight to get a deeper understanding of how CSS affects page rendering.

All in all, it takes time to draw, and if we don't reduce the drawing, we might be able to drop the detection. The user may notice the drop frame and it will appear to flash. This is fundamentally hurting the user experience for our app. We don't want to see that, so let's look at what will produce the necessary rendering (rendering) work and what we can do to optimize it.

Scrolling (scrolling)

Whether you scroll up or down, the browser needs to redraw the content before it is displayed on the screen. If all goes well, the area that might have been redrawn would be a small piece, but even a small piece of the element might have applied a complex CSS style. So it will not be drawn faster because the area is small.

To see which areas have been redrawn, you can use the debugging tools in Chrome, click on the Setting button in the upper right corner, select "Show Paint rectangles", do some simple interaction on your page, you will see some flashing rectangle, that is redrawing the area.

Scrolling performance is the key to your site's success. Users will really care about your site or app scrolling is not smooth and they don't like scrolling about the not fluent site. We are rolling to ensure that the light weight of the drawing work, so that the benefit is that the user can not see the flashing or falling frames such things.

I have already written an article about scrolling performance, if you want to learn more about me, you can refer to this article article on scrolling performance