HTML5 Scrolling Performance

The majority of the other scrolling performance issues discussed in the article are things that browsers can and will improve over time. For instance, the version of WebKit used by Safari uses a combination of tiled rendering and multithreading to achieve smooth scrolling even when painting is expensive (such as on high-DPI devices where painting involves touching many more pixels). This multithreaded scrolling system was recently improved to support "position: fixed" elements, which means the benefit that the performance difference between "fixed" and "absolute" positioned elements that the article discusses is now nonexistent in Safari.

Pages that use scroll event handlers, however, place limits on what browsers can do to improve scrolling performance. Scroll events have to be interleaved with the painting that occurs during a scroll, otherwise any movement of onscreen elements that the event handler performs will appear out of sync with respect to the rest of the scrolling. The single threaded nature of JavaScript in web pages means that this event delivery requires bypassing the multithreading scrolling optimisation I mentioned above. Reducing, or preferably eleminating, these event handlers can result in dramatically smoother scrolling. Improvements to web technologies have been proposed in order to aid this. For instance, scroll events are often seen implementing headers that are in the flow of the page and then stick to the top of the viewport as the user scrolls downwards. "position: sticky", a means of achieving this effect without JavaScript, was recently proposed on the CSS standards mailing list [1] in order to help future developers unintentionally causing their pages to scroll in a jittery manner.

[1] http://lists.w3.org/Archives/Public/www-style/2012Jun/0627.h...

I ran into a lot of these issue (especially onScroll vs. requestAnimationFrame) while creating a Path style scrollbar menu. It's amazing the performance gains you get when you start to model things like a game (animation loop vs event driven animations). Take a gander at the source for all the optimizations I did: https://github.com/Jetsetter/PathScrollbarMenu