feat(*): use passive event listeners for better performance

Author: garthenweb

lib/ViewportProvider.tsx

@@ -7,7 +7,9 @@ import {
   shallowEqualScroll,
   shallowEqualPrivateScroll,
   shallowEqualDimensions,
+  browserSupportsPassiveEvents,
 } from './utils';
+
 import {
   IDimensions,
   IPrivateScroll,
@@ -159,9 +161,10 @@ export default class ViewportProvider extends React.PureComponent {
   }
 
   componentDidMount() {
-    window.addEventListener('scroll', this.handleScroll, false);
-    window.addEventListener('resize', this.handleResize, false);
-    window.addEventListener('orientationchange', this.handleResize, false);
+    const options = browserSupportsPassiveEvents ? { passive: true } : false;
+    window.addEventListener('scroll', this.handleScroll, options);
+    window.addEventListener('resize', this.handleResize, options);
+    window.addEventListener('orientationchange', this.handleResize, options);
 
     this.tickId = raf(this.tick);
   }

lib/utils.ts

@@ -59,3 +59,23 @@ export const shallowEqualDimensions = (a: IDimensions, b: IDimensions) => {
 
   return a.width === b.width && a.height === b.height;
 };
+
+// implementation based on https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+export const browserSupportsPassiveEvents = (() => {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+  let supportsPassive = false;
+  try {
+    var opts = Object.defineProperty({}, 'passive', {
+      get: () => {
+        supportsPassive = true;
+      },
+    });
+    window.addEventListener('testPassive', null as any, opts);
+    window.removeEventListener('testPassive', null as any, opts);
+  } catch (e) {
+    return false;
+  }
+  return supportsPassive;
+})();