Passive event listeners may speed up your scroll and touch events

Scroll and touch event listeners tend to be computationally expensive as they are triggered very often. Every time the event is fired, the browser needs to wait for the event to be processed before continuing - the event could prevent the default behavior. Luckily there is a concept called passive event listeners Show archive.org snapshot which is supported by all modern browsers.

Below are the key parts quoted from WICG's explainer on passive event listeners. See this demo video Show archive.org snapshot for a side-by-side comparison.

While there are particular scenarios where an author may indeed want to prevent scrolling, analysis indicates that the majority of touch event handlers on the web never actually call preventDefault(), so browsers often block scrolling unnecessarily.

By marking a touch or wheel listener as passive, the developer is promising the handler won't call preventDefault to disable scrolling. This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user.

Copyelem.addEventListener('touchstart', fn, { passive: true }); 

Keep your listeners fast

Modern browsers do not allow scroll events to be cancelled. For them, you will not see a performance gain when declaring scroll events as passive. To improve the scrolling behavior you should still try to keep the execution time of your handler to a minimum and combine it with a throttling Show archive.org snapshot mechanism.

Touch events can still be cancelled, mark them as passive whenever you can!

On Chrome, touchstart and touchmove is passive by default

Because of the slow adoption of { passive: true } by web developers, Chrome 56+ has decided to make touchstart and touchmove events passive by default:

• https://developers.google.com/web/updates/2017/01/scrolling-intervention Show archive.org snapshot
• https://caniuse.com/mdn-api_eventtarget_addeventlistener_options_passive_true_touch Show archive.org snapshot

You still need to make your listeners passive for performance on browsers other than Chrome.

Compatibility with old browsers

IE11 and older browser versions Show archive.org snapshot do not support passive event listeners or even an object as the third argument to event listeners. If you need to support them, use the snippet below:

Because older browsers will interpret any object in the 3rd argument as a true value for the capture argument, it's important for developers to use feature detection or a polyfill when using this API, to avoid unforeseen results.

Copy// Test via a getter in the options object to see if the passive property is accessed
var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("testPassive", null, opts);
  window.removeEventListener("testPassive", null, opts);
} catch (e) {}

// Use our detect's results. passive applied if supported, capture will be false either way.
elem.addEventListener('touchstart', fn, supportsPassive ? { passive: true } : false);