Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Analysis of passive: true

Analysis of passive: true

In 2017, Chrome, Firefox and Safari added support for passive event listeners. They help to make scrolling work smoother and are enabled by passing {passive: true} into addEventListener().

The explainer mentions that passive: true works for wheel and touch events. I practically analyzed when passive: true actually helps:

Event Works better with passive: true Is passive by default
wheel¹ Yes (Chrome), No (Firefox) No (Chrome), No (Firefox)
touchstart Yes (Chrome), ?² (Firefox) Yes (Chrome), ?² (Firefox)
touchmove Yes (Chrome), ?² (Firefox) Yes (Chrome), ?² (Firefox)
touchend No (Chrome), ?² (Firefox) (Not applicable)
resize No (Chrome, Firefox) (Not applicable)
mousemove No (Chrome, Firefox) (Not applicable)
keydown No (Chrome, Firefox) (Not applicable)
scroll No³ (Chrome, Firefox) (Not applicable)

(Testing was performed in Chrome 62.0.3168.0 Canary and Firefox 55.0b12 Developer Edition.)

Notes:

  1. This is related both to wheel and mousewheel events (mousewheel is deprecated in favor if wheel). However, Firefox triggers only the wheel events (so you can’t catch or make passive the mousewheel event listener).

  2. I was unable to catch touch* events on Firefox with my device (instead, touch scrolling triggered wheel events). Probably I’ll try later with another device and update this table.

  3. The scroll event is a weirdo. Unlike other events, it can be triggered in multiple ways (touch scrolling, keyboard scrolling, dragging the scrollbar, scrolling the mouse wheel), and, depending on the way it’s triggered, it either gets blocked by a long listener or not. Moreover, this differs across the browsers. But, generally, adding { passive: true } to the scroll event listener seems to do nothing.

Resources:

Follow me on Twitter: @iamakulov

Owner

iamakulov commented Aug 2, 2017

Re-tested with wheel, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment