Skip to content

Instantly share code, notes, and snippets.

@iamakulov
Last active March 3, 2022 23:27
Show Gist options
  • Save iamakulov/45803e89db2eb44a7a6be33a80ffcab7 to your computer and use it in GitHub Desktop.
Save iamakulov/45803e89db2eb44a7a6be33a80ffcab7 to your computer and use it in GitHub Desktop.
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

@smfr
Copy link

smfr commented Mar 3, 2022

You can tell that passive does nothing on scroll events because they are not cancelable, i.e. preventDefault() on them does nothing.

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