perf(tooltip): reduce amount of event listeners on the window (#9514)

Until now, each tooltip used to register 3 events on the window (scroll, resize and blur), even if it isn't being displayed. These can really add up on a page with a lot of tooltips. This change introduces a service that keeps track of the event handlers and only registers 1 global handler on the window for each event.

Referencing #9506.

Author: crisbeto

src/components/tooltip/tooltip.js

@@ -3,8 +3,9 @@
  * @name material.components.tooltip
  */
 angular
-    .module('material.components.tooltip', [ 'material.core' ])
-    .directive('mdTooltip', MdTooltipDirective);
+  .module('material.components.tooltip', [ 'material.core' ])
+  .directive('mdTooltip', MdTooltipDirective)
+  .service('$$mdTooltipRegistry', MdTooltipRegistry);
 
 /**
  * @ngdoc directive
@@ -33,8 +34,8 @@ angular
  * @param {boolean=} md-autohide If present or provided with a boolean value, the tooltip will hide on mouse leave, regardless of focus
  * @param {string=} md-direction Which direction would you like the tooltip to go?  Supports left, right, top, and bottom.  Defaults to bottom.
  */
-function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdTheming, $rootElement,
-                            $animate, $q, $interpolate) {
+function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdTheming, $animate,
+  $interpolate, $$mdTooltipRegistry) {
 
   var ENTER_EVENTS = 'focus touchstart mouseenter';
   var LEAVE_EVENTS = 'blur touchcancel mouseleave';
@@ -143,7 +144,7 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
       // - In these cases the scope might not have been destroyed, which is why we
       // destroy it manually. An example of this can be having `md-visible="false"` and
       // adding tooltips while they're invisible. If `md-visible` becomes true, at some
-      // point, you'd usually get a lot of inputs.
+      // point, you'd usually get a lot of tooltips.
       // - We use `.one`, not `.on`, because this only needs to fire once. If we were
       // using `.on`, it would get thrown into an infinite loop.
       // - This kicks off the scope's `$destroy` event which finishes the cleanup.
@@ -202,21 +203,21 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
       var windowBlurHandler = function() {
         elementFocusedOnWindowBlur = document.activeElement === parent[0];
       };
+
       var elementFocusedOnWindowBlur = false;
 
       function windowScrollHandler() {
         setVisible(false);
       }
 
-      angular.element($window)
-        .on('blur', windowBlurHandler)
-        .on('resize', debouncedOnResize);
+      $$mdTooltipRegistry.register('scroll', windowScrollHandler, true);
+      $$mdTooltipRegistry.register('blur', windowBlurHandler);
+      $$mdTooltipRegistry.register('resize', debouncedOnResize);
 
-      document.addEventListener('scroll', windowScrollHandler, true);
       scope.$on('$destroy', function() {
-        angular.element($window)
-          .off('blur', windowBlurHandler)
-          .off('resize', debouncedOnResize);
+          $$mdTooltipRegistry.deregister('scroll', windowScrollHandler, true);
+          $$mdTooltipRegistry.deregister('blur', windowBlurHandler);
+          $$mdTooltipRegistry.deregister('resize', debouncedOnResize);
 
         parent
           .off(ENTER_EVENTS, enterHandler)
@@ -225,7 +226,6 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
 
         // Trigger the handler in case any the tooltip was still visible.
         leaveHandler();
-        document.removeEventListener('scroll', windowScrollHandler, true);
         attributeObserver && attributeObserver.disconnect();
       });
 
@@ -248,6 +248,7 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
           }
         }
       };
+
       var leaveHandler = function () {
         var autohide = scope.hasOwnProperty('autohide') ? scope.autohide : attr.hasOwnProperty('mdAutohide');
 
@@ -266,6 +267,7 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
         }
         mouseActive = false;
       };
+
       var mousedownHandler = function() {
         mouseActive = true;
       };
@@ -386,3 +388,78 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
   }
 
 }
+
+/**
+ * Service that is used to reduce the amount of listeners that are being
+ * registered on the `window` by the tooltip component. Works by collecting
+ * the individual event handlers and dispatching them from a global handler.
+ *
+ * @ngInject
+ */
+function MdTooltipRegistry() {
+  var listeners = {};
+  var ngWindow = angular.element(window);
+
+  return {
+    register: register,
+    deregister: deregister
+  };
+
+  /**
+   * Global event handler that dispatches the registered
+   * handlers in the service.
+   * @param  {Event} event Event object passed in by the browser.
+   */
+  function globalEventHandler(event) {
+    if (listeners[event.type]) {
+      listeners[event.type].forEach(function(currentHandler) {
+        currentHandler.call(this, event);
+      }, this);
+    }
+  }
+
+  /**
+   * Registers a new handler with the service.
+   * @param  {String} type Type of event to be registered.
+   * @param  {Function} handler Event handler
+   * @param  {Boolean} useCapture Whether to use event capturing.
+   */
+  function register(type, handler, useCapture) {
+    var array = listeners[type] = listeners[type] || [];
+
+    if (!array.length) {
+      if (useCapture) {
+        window.addEventListener(type, globalEventHandler, true);
+      } else {
+        ngWindow.on(type, globalEventHandler);
+      }
+    }
+
+    if (array.indexOf(handler) === -1) {
+      array.push(handler);
+    }
+  }
+
+  /**
+   * Removes an event handler from the service.
+   * @param  {String} type Type of event handler.
+   * @param  {Function} handler The event handler itself.
+   * @param  {Boolean} useCapture Whether the event handler used event capturing.
+   */
+  function deregister(type, handler, useCapture) {
+    var array = listeners[type];
+    var index = array ? array.indexOf(handler) : -1;
+
+    if (index > -1) {
+      array.splice(index, 1);
+
+      if (array.length === 0) {
+        if (useCapture) {
+          window.removeEventListener(type, globalEventHandler, true);
+        } else {
+          ngWindow.off(type, globalEventHandler);
+        }
+      }
+    }
+  }
+}

src/components/tooltip/tooltip.spec.js

@@ -1,14 +1,15 @@
 describe('<md-tooltip> directive', function() {
-  var $compile, $rootScope, $material, $timeout;
+  var $compile, $rootScope, $material, $timeout, $$mdTooltipRegistry;
   var element;
 
   beforeEach(module('material.components.tooltip'));
   beforeEach(module('material.components.button'));
-  beforeEach(inject(function(_$compile_, _$rootScope_, _$material_, _$timeout_){
+  beforeEach(inject(function(_$compile_, _$rootScope_, _$material_, _$timeout_, _$$mdTooltipRegistry_){
     $compile   = _$compile_;
     $rootScope = _$rootScope_;
     $material  = _$material_;
     $timeout   = _$timeout_;
+    $$mdTooltipRegistry = _$$mdTooltipRegistry_;
   }));
   afterEach(function() {
     // Make sure to remove/cleanup after each test
@@ -18,20 +19,14 @@ describe('<md-tooltip> directive', function() {
   });
 
   it('should support dynamic directions', function() {
-    var error;
-
-    try {
+    expect(function() {
       buildTooltip(
         '<md-button>' +
-        'Hello' +
-        '<md-tooltip md-direction="{{direction}}">Tooltip</md-tooltip>' +
+          'Hello' +
+          '<md-tooltip md-direction="{{direction}}">Tooltip</md-tooltip>' +
         '</md-button>'
       );
-    } catch(e) {
-      error = e;
-    }
-
-    expect(error).toBe(undefined);
+    }).not.toThrow();
   });
 
   it('should set the position to "bottom", if it is undefined', function() {
@@ -140,6 +135,18 @@ describe('<md-tooltip> directive', function() {
 
   });
 
+  it('should register itself with the $$mdTooltipRegistry', function() {
+    spyOn($$mdTooltipRegistry, 'register');
+
+    buildTooltip(
+      '<md-button>' +
+        '<md-tooltip>Tooltip</md-tooltip>' +
+      '</md-button>'
+    );
+
+    expect($$mdTooltipRegistry.register).toHaveBeenCalled();
+  });
+
   describe('show and hide', function() {
 
     it('should show and hide when visible is set',  function() {
@@ -370,6 +377,18 @@ describe('<md-tooltip> directive', function() {
       expect(findTooltip().length).toBe(0);
     });
 
+    it('should remove itself from the $$mdTooltipRegistry when it is destroyed', function() {
+      buildTooltip(
+        '<md-button>' +
+          '<md-tooltip md-visible="true">Tooltip</md-tooltip>' +
+        '</md-button>'
+      );
+
+      spyOn($$mdTooltipRegistry, 'deregister');
+      findTooltip().scope().$destroy();
+      expect($$mdTooltipRegistry.deregister).toHaveBeenCalled();
+    });
+
     it('should not re-appear if it was outside the DOM when the parent was removed', function() {
       buildTooltip(
         '<md-button>' +
@@ -436,3 +455,43 @@ describe('<md-tooltip> directive', function() {
   }
 
 });
+
+describe('$$mdTooltipRegistry service', function() {
+  var tooltipRegistry, ngWindow;
+
+  beforeEach(function() {
+    module('material.components.tooltip');
+
+    inject(function($$mdTooltipRegistry, $window) {
+      tooltipRegistry = $$mdTooltipRegistry;
+      ngWindow = angular.element($window);
+    });
+  });
+
+  it('should allow for registering event handlers on the window', function() {
+    var obj = { callback: function() {} };
+
+    spyOn(obj, 'callback');
+    tooltipRegistry.register('resize', obj.callback);
+    ngWindow.triggerHandler('resize');
+
+    // check that the callback was triggered
+    expect(obj.callback).toHaveBeenCalled();
+
+    // check that the event object was passed
+    expect(obj.callback.calls.mostRecent().args[0]).toBeTruthy();
+  });
+
+  it('should allow deregistering of the callbacks', function() {
+    var obj = { callback: function() {} };
+
+    spyOn(obj, 'callback');
+    tooltipRegistry.register('resize', obj.callback);
+    ngWindow.triggerHandler('resize');
+    expect(obj.callback).toHaveBeenCalledTimes(1);
+
+    tooltipRegistry.deregister('resize', obj.callback);
+    ngWindow.triggerHandler('resize');
+    expect(obj.callback).toHaveBeenCalledTimes(1);
+  });
+});