Slow rasterization in Dev Tools

Question

I am optimizing a site with a fairly simple scrolling parallax. Animated elements are on separate layers ( backface-visibility:hidden ), and the steps of the scripts and rendering seem pretty quick. However, I see a lot of time for painting:

The actual drawing is good, but those huge hollow green stripes are rasterized in a separate stream of the composer.

Here is the link

What am I doing to cause this and how to improve it?

Answer 1

Ok, I can reproduce the stripes.

They occur in the stream of the composer, so we make them hollow. you can see it more clearly by clicking on the flame map:

Then, if you registered a timeline with the Paint checkbox selected, you can see exactly what was inside each paint.

And then we can use the slider to narrow down which drawing calls are the most expensive part of these great colors:

(looks like a big clip and then a bitmap)

But, looking in the aggregate, it seems that you redraw the world in each frame.

You can see what happens in each frame ... especially for your layers:

BUT.

After all this, you can solve your problems with transform:translate() animations instead of left / top . I would also recommend adding will-change:transform to these elements. This will allow the browser to move objects without repainting, and you do not have to redraw on every frame.

should read:

• Animation and Performance - Web Basics
• High Performance Animations - html5rocks

Greetings