

HTML5 Scrolling Performance - abraham
http://www.html5rocks.com/en/tutorials/speed/scrolling/

======
bdash
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...](http://lists.w3.org/Archives/Public/www-
style/2012Jun/0627.html)

------
dschwartz88
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>

