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 positor thread.

Here's the link

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

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 positor thread.

Here's the link

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

• javascript
• performance
• google-chrome-devtools
• frontend

• Can you share your page or at least a part of it? – Kiril Commented Feb 24, 2015 at 16:59
• @Kiril I've added a link to the dev site. Thanks for looking. – Tamlyn Commented Feb 25, 2015 at 13:19

1 Answer 1

Okay, I can repro the hollow bars.

They are happening on the positor 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 remend 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