[Performance] Optimize Paint and Composite for the website

"Paint" is one of the most preference killer, it can easily cost more than 60fps, and once your trigger "Paint" it always t Rigger "Composite" as well.

First of all, let's see how to use Chrome devtools to help us identifiy the Paint problem.

A. Turn on rendering:

Then check the "Paint flasing" option.

Then use this demo site, keep "Paint flashing" open, and you should see if you scrolling the page, the whole page is re Painting (mark in green overlay).

Of course the whole page is re-painting are not good sign for the performance.

Record the timeline for the demo page and scroll a bit, then check the Paint profilter:

From this can pretty much see all the commands it runs and each step what's painted to the page.

Composite:

To avoid too much painting, we can put different compoment in different layouts.

For example the Side-nav compoment, to prevent the whole page re-paint again and again, we can put side nav in a different Layout, so, the main page won ' t re-paint.

Prompt element into a layout:

Code That works:

Will-change:transform;transform:translatez (0); Hack for some browser no support Will-change

DEMO site, you can see it move really slow and if you add the CSS to. box, the performance improve a lot.

Notice that, only using a layer promption when is changing the position, opacity stuff, if you want to change text in T He element, layer promption doesn ' t make any sence

Now let's say how to figure out how many layers we had in the site.

We need again our chrome devtools-to-help.

Select "Layout", and Nav to the demo site.

Zoom in the page, until is able to scroll the page.

Then see the Dev Tool:

In the layers sections, you able to see how many layers the page. And it's the reason why it's a composition layer, in the image, it says that "composition due to association with An element with a CSS 3D transform ".

If you check the CSS code for "#color-block":

{    width: 300px;     height: 300px;     background: Red;     transform: translatez (0); //This is the key    position: relative;     z-index: 0;}

And if we select "totes-promoted" block, we can see the "Composition due to association with an element overlapping< /c19> other composited elements ".

So is careful that when you prompt one element into a layer, the overlapping elements would be also prompted as well.

This may cause memory problem.

[Performance] Optimize Paint and Composite for the website