Page rendering-simplifies paint complexity and area

Paint is the process of populating pixels and finally compositing on the user's screen.

Usually the most expensive in the pipeline, you should avoid using paint as much as possible.

• Animations that use animation properties in addition to transform and opacity will trigger the paint
• Paint is the most expensive part of a pixel pipeline, so avoid using
• Reduce the layer area when layers are lifted (promotion) and when the animation is allocated
• Use the Chrom Devtools's Paint module to calculate the complexity and cost of paint: Reduce the amount you can reduce

If you trigger the layout you must trigger the paint, because changing the geometry of the element means that the pixel of the element needs to be modified.

You can trigger the paint if you change properties that are not geometric properties, such as Background,text color, or shadow.

In these cases, layout will not be triggered and the pipeline looks like this:

Quickly detect paint bottlenecks with Chrome DevTools

Select rendering in the console column in Chrome devtools, tick show paint rectangels

Note that the above hook selection will cause Chrome to capture where the paint will take place and show it in green.

If there are places where you don't think the paint should happen, then you can drill down to optimize.

When you want to get more information on paint, you can select paint in timeline, and remember that only the browser can record the information after the paint is selected, otherwise the paint will not be detected.

Now, you need to do recording. After the recording is finished, select a frame and click Paint Profiler in the summary below, such as:

After clicking, you can see where the paint was, how long this paint took and the individual paint the paint called.

The above detection method allows you to simultaneously detect the complexity of the paint and the area of the paint.

You can optimize based on the results.

Lifting of elements that need to be moved and subsided (promote)

Paint does not always paint a single image in memory. In fact, the browser is painted in multiple images or multiple synth layers (compositor layers), if necessary.

The benefit is that the element is again being paint or moved with the Transform property on the screen, which can have no effect on other elements.

This is like painting software sketch,gimp or Photoshop, where one layer does not affect the other layer, and all the layers one after the other and creates a picture in addition to the last one.

The best way to create a new layer is to use CSS properties will-change . Works in Chrome and opera and Firefox browsers, and because the Will-change property value is transform, a new constructor layer is created.

{  will-change: transform;}

For browsers that do not support the Will-change property, but in order to create a layer, you must (by mistake) use 3D transform to force a new layer to be created for safari and mobile Safari.

{  transform: translatez (0);}

Be careful not to create too many layers, because a layer takes up both memory and management. If you raise the element (promote a elements) to create a new layer, use Devtools to determine that doing so will give you a performance boost.

Do not elevate the element directly without testing it.

Reduce Paint Area

The big challenge for paint is that the browser combines two elements that need to be paint, and this will cause the entire screen to be re-paint.

Therefore, reduce the paint area as much as possible.

Simplifies the complexity of paint

When it comes to paint, some behaviors are very expensive.

For example, any code that contains a blur effect, such as a shadow, will take longer to draw than a red box.

The background:red and Box-shadow:0,4px,4px,rgba (0,0,0,0.5) in CSS have a very different effect on performance.

The paint profiler above allows you to decide whether you need to replace existing schemes to achieve optimal performance in order to achieve the same results: you want to paint the animation as much as possible, and each frame will have more than 10ms of paint, especially on mobile phones.

Page rendering-simplifies paint complexity and area