johnpolacek/superscrollorama

Scrolling performance improvements via layerization

paulirish opened this issue · 4 comments

paulirish commented

Just spent some time working on the scrolling perf of this page with superscrollorama: http://www.complex.com/covers/jhene-aiko-interview-inner-visions-2014-cover-story/

The big issue is that there's massive paint storms on desktop due to the many position:fixed elements.

This manifests as the entire screen (and more) being rasterized and painted on every frame, leading to rough scrolling performance. (The videos don't help).

The fix is pretty easy.

Apply will-change: top to any element that you set pos:fixed to. This will force it into a layer for compositing, and will prevent the browser from painting it every frame. BTW these are the values that trigger layerization in Chrome.

The easy way to see the improvements:

  • open chrome devtools. hit Esc to open the drawer
  • click on rendering tab.
  • check Show Paint Rectangles and check Show compositing layer borders

Try this before and after. You'll see you have more layers and less painting.

You can go overboard with layers. On mobile you only want a max of 30-ish. Desktop can handle more, but for these cases it makes sense to layerize fairly conservatively, since you, the library, can't guarantee there aren't 200 elements in play.

I applied this change to the above mentioned page and saw my scrolling go from 16FPS to ~40. It's good stuff.

More: http://www.html5rocks.com/en/tutorials/speed/layers/ , http://www.sitepoint.com/introduction-css-will-change-property/

Cheers

paulirish commented

Oh, and here's updated browser support: https://github.com/operasoftware/devopera/pull/330/files

and extra undocumented facts about will-change in Chrome: operasoftware/devopera#330

cc @aerotwist

johnpolacek commented

Thanks Paul! Superscrollorama has been superceded by Scrollmagic, a newer better scroll animation library at https://github.com/janpaepke/ScrollMagic

Even though this lib is not under active development anymore, I'll do a fix. Unless @janpaepke beats me to it.

paulirish commented

Coolness, thank you!

Can you also make mention of this succession in the download section of the superscrollorama site? I hadn't noticed the "new version" badge at the top when previously looking at it. gracias!

karneaud commented

Does this still work? As I've looked at the test site and its pretty darn jumpy on my MacPro Safari ...Chrome however looks pretty darn neat!