perf(table) Coalesces style updates after style measurements to reduce layout thrashing Exposes the CoalescedStyleScheduler for use by other related components in a table such as column resize.

Author: kseamon

src/cdk/table/coalesced-style-scheduler.ts

@@ -0,0 +1,26 @@
+import {Injectable, NgZone} from '@angular/core';
+import {from, Observable} from 'rxjs';
+
+@Injectable()
+export class CoalescedStyleScheduler {
+  private _currentSchedule: Observable<void>|null = null;
+
+  constructor(private readonly _ngZone: NgZone) {}
+
+  schedule(task: () => unknown): void {
+    this._createScheduleIfNeeded();
+
+    this._currentSchedule!.subscribe(task);
+  }
+
+  private _createScheduleIfNeeded() {
+    if (this._currentSchedule) { return; }
+
+    this._ngZone.runOutsideAngular(() => {
+      this._currentSchedule = from(new Promise<void>((resolve) => {
+        this._currentSchedule = null;
+        resolve(undefined);
+      }));
+    });
+  }
+}

src/cdk/table/public-api.ts

@@ -8,6 +8,7 @@
 
 export * from './table';
 export * from './cell';
+export * from './coalesced-style-scheduler';
 export * from './row';
 export * from './table-module';
 export * from './sticky-styler';

src/cdk/table/sticky-styler.ts

@@ -11,6 +11,7 @@
  * @docs-private
  */
 import {Direction} from '@angular/cdk/bidi';
+import {CoalescedStyleScheduler} from './coalesced-style-scheduler';
 
 export type StickyDirection = 'top' | 'bottom' | 'left' | 'right';
 
@@ -37,6 +38,7 @@ export class StickyStyler {
   constructor(private _isNativeHtmlTable: boolean,
               private _stickCellCss: string,
               public direction: Direction,
+              private _coalescedStyleScheduler: CoalescedStyleScheduler,
               private _isBrowser = true) { }
 
   /**
@@ -46,20 +48,25 @@ export class StickyStyler {
    * @param stickyDirections The directions that should no longer be set as sticky on the rows.
    */
   clearStickyPositioning(rows: HTMLElement[], stickyDirections: StickyDirection[]) {
+    const elementsToClear: HTMLElement[] = [];
     for (const row of rows) {
       // If the row isn't an element (e.g. if it's an `ng-container`),
       // it won't have inline styles or `children` so we skip it.
       if (row.nodeType !== row.ELEMENT_NODE) {
         continue;
       }
 
-      this._removeStickyStyle(row, stickyDirections);
-
+      elementsToClear.push(row);
       for (let i = 0; i < row.children.length; i++) {
-        const cell = row.children[i] as HTMLElement;
-        this._removeStickyStyle(cell, stickyDirections);
+        elementsToClear.push(row.children[i] as HTMLElement);
       }
     }
+
+    this._coalescedStyleScheduler.schedule(() => {
+      for (const element of elementsToClear) {
+        this._removeStickyStyle(element, stickyDirections);
+      }
+    });
   }
 
   /**
@@ -73,9 +80,8 @@ export class StickyStyler {
    */
   updateStickyColumns(
       rows: HTMLElement[], stickyStartStates: boolean[], stickyEndStates: boolean[]) {
-    const hasStickyColumns =
-        stickyStartStates.some(state => state) || stickyEndStates.some(state => state);
-    if (!rows.length || !hasStickyColumns || !this._isBrowser) {
+    if (!rows.length || !this._isBrowser || !(stickyStartStates.some(state => state) ||
+        stickyEndStates.some(state => state))) {
       return;
     }
 
@@ -85,20 +91,25 @@ export class StickyStyler {
 
     const startPositions = this._getStickyStartColumnPositions(cellWidths, stickyStartStates);
     const endPositions = this._getStickyEndColumnPositions(cellWidths, stickyEndStates);
-    const isRtl = this.direction === 'rtl';
-
-    for (const row of rows) {
-      for (let i = 0; i < numCells; i++) {
-        const cell = row.children[i] as HTMLElement;
-        if (stickyStartStates[i]) {
-          this._addStickyStyle(cell, isRtl ? 'right' : 'left', startPositions[i]);
-        }
 
-        if (stickyEndStates[i]) {
-          this._addStickyStyle(cell, isRtl ? 'left' : 'right', endPositions[i]);
+    this._coalescedStyleScheduler.schedule(() => {
+      const isRtl = this.direction === 'rtl';
+      const start = isRtl ? 'right' : 'left';
+      const end = isRtl ? 'left' : 'right';
+
+      for (const row of rows) {
+        for (let i = 0; i < numCells; i++) {
+          const cell = row.children[i] as HTMLElement;
+          if (stickyStartStates[i]) {
+            this._addStickyStyle(cell, start, startPositions[i]);
+          }
+
+          if (stickyEndStates[i]) {
+            this._addStickyStyle(cell, end, endPositions[i]);
+          }
         }
       }
-    }
+    });
   }
 
   /**
@@ -124,30 +135,37 @@ export class StickyStyler {
     const rows = position === 'bottom' ? rowsToStick.slice().reverse() : rowsToStick;
     const states = position === 'bottom' ? stickyStates.slice().reverse() : stickyStates;
 
-    let stickyHeight = 0;
-    for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+    // Measure row heights all at once before adding sticky styles to reduce layout thrashing.
+    const stickyHeights: number[] = [];
+    const elementsToStick: HTMLElement[][] = [];
+    for (let rowIndex = 0, stickyHeight = 0; rowIndex < rows.length; rowIndex++) {
+      stickyHeights[rowIndex] = stickyHeight;
+
       if (!states[rowIndex]) {
         continue;
       }
 
       const row = rows[rowIndex];
-      if (this._isNativeHtmlTable) {
-        for (let j = 0; j < row.children.length; j++) {
-          const cell = row.children[j] as HTMLElement;
-          this._addStickyStyle(cell, position, stickyHeight);
-        }
-      } else {
-        // Flex does not respect the stick positioning on the cells, needs to be applied to the row.
-        // If this is applied on a native table, Safari causes the header to fly in wrong direction.
-        this._addStickyStyle(row, position, stickyHeight);
-      }
+      elementsToStick[rowIndex] = this._isNativeHtmlTable ?
+          Array.from(row.children) as HTMLElement[] : [row];
 
-      if (rowIndex === rows.length - 1) {
-        // prevent unnecessary reflow from getBoundingClientRect()
-        return;
+      if (rowIndex !== rows.length - 1) {
+        stickyHeight += row.getBoundingClientRect().height;
       }
-      stickyHeight += row.getBoundingClientRect().height;
     }
+
+    this._coalescedStyleScheduler.schedule(() => {
+      for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+        if (!states[rowIndex]) {
+          continue;
+        }
+
+        const height = stickyHeights[rowIndex];
+        for (const element of elementsToStick[rowIndex]) {
+          this._addStickyStyle(element, position, height);
+        }
+      }
+    });
   }
 
   /**
@@ -162,11 +180,14 @@ export class StickyStyler {
     }
 
     const tfoot = tableElement.querySelector('tfoot')!;
-    if (stickyStates.some(state => !state)) {
-      this._removeStickyStyle(tfoot, ['bottom']);
-    } else {
-      this._addStickyStyle(tfoot, 'bottom', 0);
-    }
+
+    this._coalescedStyleScheduler.schedule(() => {
+      if (stickyStates.some(state => !state)) {
+        this._removeStickyStyle(tfoot, ['bottom']);
+      } else {
+        this._addStickyStyle(tfoot, 'bottom', 0);
+      }
+    });
   }
 
   /**