Improving Scroll Performance with Passive Event Listeners

New to Chrome 51, passive event listeners are an emerging web standard that provide
a major potential boost to scroll performance, especially on mobile. Check out the
video below for a side-by-side demo of the improvements in action:

Note: The basic scroll event cannot be canceled, so it does not need to be set
passive. However, you should still prevent expensive work from being
completed in the handler.

How it works

When you scroll a page and there's such a delay that the page doesn't feel anchored
to your finger, that's called scroll jank. Many times when you encounter scroll
jank, the culprit is a touch event listener. Touch event listeners are often useful
for tracking user interactions and creating custom scroll experiences, such as
cancelling the scroll altogether when interacting with an embedded Google Map.
Currently, browsers can't know if a touch event listener is going to cancel the
scroll, so they always wait for the listener to finish before scrolling the page.
Passive event listeners solve this problem by enabling you to set a flag in the
options parameter of addEventListener indicating that the listener will never
cancel the scroll. That information enables browsers to scroll the page immediately,
rather than after the listener has finished.

Learn more

Check out the Chromium blog for a high-level overview of how passive event listeners work: