perf(ripple): optimize event registration (#18633)

* perf(ripple): optimize event registration

Improve scalabiliity of Angular Material components.
When used in an app with a large and heavy UI with large numbers of material components (for example in table cells), they can quickly become prohibitively expensive due to their heavy DOM structure and lots of up-front work.

Each component with a ripple ends up registering 6 event listeners. This PR makes 4 of them registered on-demand.

Note, that this is really a stop-gap solution to help improve performance in our application. A proper implementation should utilize a single document-level service that only registers one set of these event listeners, and uses event delegation to apply ripple effects.

* Update core.d.ts

* Add the @docs-private annotation.

Author: mleibman

src/material/core/ripple/ripple-renderer.ts

@@ -61,14 +61,20 @@ const ignoreMouseEventsTimeout = 800;
 /** Options that apply to all the event listeners that are bound by the ripple renderer. */
 const passiveEventOptions = normalizePassiveListenerOptions({passive: true});
 
+/** Events that signal that the pointer is down. */
+const pointerDownEvents = ['mousedown', 'touchstart'];
+
+/** Events that signal that the pointer is up. */
+const pointerUpEvents = ['mouseup', 'mouseleave', 'touchend', 'touchcancel'];
+
 /**
  * Helper service that performs DOM manipulations. Not intended to be used outside this module.
  * The constructor takes a reference to the ripple directive's host element and a map of DOM
  * event handlers to be installed on the element that triggers ripple animations.
  * This will eventually become a custom renderer once Angular support exists.
  * @docs-private
  */
-export class RippleRenderer {
+export class RippleRenderer implements EventListenerObject {
   /** Element where the ripples are being added to. */
   private _containerElement: HTMLElement;
 
@@ -78,9 +84,6 @@ export class RippleRenderer {
   /** Whether the pointer is currently down or not. */
   private _isPointerDown = false;
 
-  /** Events to be registered on the trigger element. */
-  private _triggerEvents = new Map<string, any>();
-
   /** Set of currently active ripple references. */
   private _activeRipples = new Set<RippleRef>();
 
@@ -90,6 +93,9 @@ export class RippleRenderer {
   /** Time in milliseconds when the last touchstart event happened. */
   private _lastTouchStartEvent: number;
 
+  /** Whether pointer-up event listeners have been registered. */
+  private _pointerUpEventsRegistered = false;
+
   /**
    * Cached dimensions of the ripple container. Set when the first
    * ripple is shown and cleared once no more ripples are visible.
@@ -104,16 +110,6 @@ export class RippleRenderer {
     // Only do anything if we're on the browser.
     if (platform.isBrowser) {
       this._containerElement = coerceElement(elementOrElementRef);
-
-      // Specify events which need to be registered on the trigger.
-      this._triggerEvents
-        .set('mousedown', this._onMousedown)
-        .set('mouseup', this._onPointerUp)
-        .set('mouseleave', this._onPointerUp)
-
-        .set('touchstart', this._onTouchStart)
-        .set('touchend', this._onPointerUp)
-        .set('touchcancel', this._onPointerUp);
     }
   }
 
@@ -241,17 +237,34 @@ export class RippleRenderer {
     // Remove all previously registered event listeners from the trigger element.
     this._removeTriggerEvents();
 
-    this._ngZone.runOutsideAngular(() => {
-      this._triggerEvents.forEach((fn, type) => {
-        element.addEventListener(type, fn, passiveEventOptions);
-      });
-    });
-
     this._triggerElement = element;
+    this._registerEvents(pointerDownEvents);
+  }
+
+  /**
+   * Handles all registered events.
+   * @docs-private
+   */
+  handleEvent(event: Event) {
+    if (event.type === 'mousedown') {
+      this._onMousedown(event as MouseEvent);
+    } else if (event.type === 'touchstart') {
+      this._onTouchStart(event as TouchEvent);
+    } else {
+      this._onPointerUp();
+    }
+
+    // If pointer-up events haven't been registered yet, do so now.
+    // We do this on-demand in order to reduce the total number of event listeners
+    // registered by the ripples, which speeds up the rendering time for large UIs.
+    if (!this._pointerUpEventsRegistered) {
+      this._registerEvents(pointerUpEvents);
+      this._pointerUpEventsRegistered = true;
+    }
   }
 
   /** Function being called whenever the trigger is being pressed using mouse. */
-  private _onMousedown = (event: MouseEvent) => {
+  private _onMousedown(event: MouseEvent) {
     // Screen readers will fire fake mouse events for space/enter. Skip launching a
     // ripple in this case for consistency with the non-screen-reader experience.
     const isFakeMousedown = isFakeMousedownFromScreenReader(event);
@@ -265,7 +278,7 @@ export class RippleRenderer {
   }
 
   /** Function being called whenever the trigger is being pressed using touch. */
-  private _onTouchStart = (event: TouchEvent) => {
+  private _onTouchStart(event: TouchEvent) {
     if (!this._target.rippleDisabled) {
       // Some browsers fire mouse events after a `touchstart` event. Those synthetic mouse
       // events will launch a second ripple if we don't ignore mouse events for a specific
@@ -284,7 +297,7 @@ export class RippleRenderer {
   }
 
   /** Function being called whenever the trigger is being released. */
-  private _onPointerUp = () => {
+  private _onPointerUp() {
     if (!this._isPointerDown) {
       return;
     }
@@ -309,12 +322,27 @@ export class RippleRenderer {
     this._ngZone.runOutsideAngular(() => setTimeout(fn, delay));
   }
 
+  /** Registers event listeners for a given list of events. */
+  private _registerEvents(eventTypes: string[]) {
+    this._ngZone.runOutsideAngular(() => {
+      eventTypes.forEach((type) => {
+        this._triggerElement!.addEventListener(type, this, passiveEventOptions);
+      });
+    });
+  }
+
   /** Removes previously registered event listeners from the trigger element. */
   _removeTriggerEvents() {
     if (this._triggerElement) {
-      this._triggerEvents.forEach((fn, type) => {
-        this._triggerElement!.removeEventListener(type, fn, passiveEventOptions);
+      pointerDownEvents.forEach((type) => {
+        this._triggerElement!.removeEventListener(type, this, passiveEventOptions);
       });
+
+      if (this._pointerUpEventsRegistered) {
+        pointerUpEvents.forEach((type) => {
+          this._triggerElement!.removeEventListener(type, this, passiveEventOptions);
+        });
+      }
     }
   }
 }

tools/public_api_guard/material/core.d.ts

@@ -434,12 +434,13 @@ export declare class RippleRef {
     fadeOut(): void;
 }
 
-export declare class RippleRenderer {
+export declare class RippleRenderer implements EventListenerObject {
     constructor(_target: RippleTarget, _ngZone: NgZone, elementOrElementRef: HTMLElement | ElementRef<HTMLElement>, platform: Platform);
     _removeTriggerEvents(): void;
     fadeInRipple(x: number, y: number, config?: RippleConfig): RippleRef;
     fadeOutAll(): void;
     fadeOutRipple(rippleRef: RippleRef): void;
+    handleEvent(event: Event): void;
     setupTriggerEvents(elementOrElementRef: HTMLElement | ElementRef<HTMLElement>): void;
 }