Tutorial

Speed Up Scroll Events with Passive Event Listeners

Published on May 11, 2017
author

Joshua Bemenderfer

Speed Up Scroll Events with Passive Event Listeners

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Okay, let me get this out of the way real quick. I hate websites that attach wheel (or touchstart and touchmove) events to a page. Utterly hate them. The main reason is the horrid resulting performance, especially on mobile. You see, the browser has to wait to redraw the page until the event listener finishes execution, as the event is able to be canceled. If your event runs on every single scroll, then scrolling the page gets incredibly janky, especially if you don’t debounce the events. Thankfully, there is now a solution: Passive Event Listeners.

Passive Event Listeners allow you to attach un-cancelable handlers to events, letting browsers optimize around your event listeners. The browser can then, for example, keep scrolling at native speed without waiting for your event handlers to finish executing.

While they are a relatively new addition to the spec, they’re already supported by most of the big players. (Everybody except IE, Edge, and Opera Mini, basically.)

Additionally, their usage is such that they don’t really break existing behavior. If you need to support the other browsers, you can use this polyfill.

Usage

Using passive events, unfortunately, is pretty complicated.

Say your original code is something like this:

// Really, if you're using wheel, you should instead be using the 'scroll' event, as it's passive by default.
document.addEventListener('wheel', (evt) => {
  // ... do stuff with evt
}, true)

You’ll need to replace it with this:

document.addEventListener('wheel', (evt) => {
  // ... do stuff with evt
}, {
  capture: true,
  passive: true
})

Yeah. I know. Almost impossible to wrap your head around. 😉

Let me try to explain.

So, often when registering scroll events, you add the last parameter, true, to indicate that your event should run in the capturing phase. (ie. top-down instead of bottom-up)

One of the new features enabling passive events is the EventListenerOptions spec. Sounds scary, but it really just optionally replaces that capture boolean with an object with a few properties. In this case, we can set capture to true to get the same result as the first example, and then set passive to true to make the event passive.

To improve performance further, make sure you’re throttling or debouncing your events. :)

Uses

The events with the greatest perceived performance penalty (say that five times fast) on mobile are scroll, wheel, touchstart, and touchmove. Scroll already is passive by default, so that takes one event out of the equation. As of Chrome 55, touchstart and touchend are passive as well.

So, if you’re handling any of those four events on mobile, it couldn’t hurt to throw in that tiny polyfill and add { passive: true } to those events. 99% of the time you won’t need to cancel those events anyway, and using { passive: true } can add a massive performance boost. So why not?

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
Joshua Bemenderfer

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel