Slow rasterization in Dev Tools

Question

I'm optimising a site with some fairly simple parallax scrolling. The animated elements are on separate layers (backface-visibility:hidden) and the scripting and rendering steps seem fairly quick. However I'm seeing a lot of time spent on painting:

The actual drawing is fine but those huge hollow green bars represent rasterization in the separate compositor thread.

Here's the link

What am I doing to cause that and how can I improve it?

Answer 1

Okay, I can repro the hollow bars.

They are happening on the compositor thread, that's why we do them hollow. you can see it more clearly flicking to the flame chart:

Then if you recorded the timeline with the Paint checkbox checked you can see exactly what was inside each paint.

And we can then use the slider to narrow down which draw calls are the most expensive part of these big paints:

(looks like a big cliprect and then the bitmap draw)

But looking in aggregate.. it appears that you're repainting the world in every frame.

You might want to look at what's happening in each frame... especially to your layers:

HOWEVER.

After all that, it appears you can solve your issues with animating transform:translate() instead of left/top. I would also recommend adding will-change:transform to those items. This will allow the browser to move items around without repainting and you shouldn't have to reraster on each frame.

must reads:

• Animations and Performance - web fundamentals
• High Performance Animations - html5rocks

Cheers