perf(cdk/table): Further defer direct dom measurement. In all cases I've observed, this fully eliminates layout thrashing from table init.

Author: kseamon

src/cdk/table/sticky-styler.ts

@@ -22,6 +22,12 @@ interface UpdateStickyColumnsParams {
   stickyEndStates: boolean[];
 }
 
+interface UpdateStickRowsParams {
+  rowsToStick: HTMLElement[];
+  stickyStates: boolean[];
+  position: 'top' | 'bottom';
+}
+
 /**
  * List of all possible directions that can be used for sticky positioning.
  * @docs-private
@@ -38,7 +44,8 @@ export class StickyStyler {
     ? new globalThis.ResizeObserver(entries => this._updateCachedSizes(entries))
     : null;
   private _updatedStickyColumnsParamsToReplay: UpdateStickyColumnsParams[] = [];
-  private _stickyColumnsReplayTimeout: number | null = null;
+  private _updatedStickRowsParamsToReplay: UpdateStickRowsParams[] = [];
+  private _stickyReplayTimeout: number | null = null;
   private _cachedCellWidths: number[] = [];
   private readonly _borderCellCss: Readonly<{[d in StickyDirection]: string}>;
 
@@ -206,14 +213,27 @@ export class StickyStyler {
    *     should be stuck in the particular top or bottom position.
    * @param position The position direction in which the row should be stuck if that row should be
    *     sticky.
-   *
+   * @param replay Whether to enqueue this call for replay after a ResizeObserver update.
    */
-  stickRows(rowsToStick: HTMLElement[], stickyStates: boolean[], position: 'top' | 'bottom') {
+  stickRows(
+    rowsToStick: HTMLElement[],
+    stickyStates: boolean[],
+    position: 'top' | 'bottom',
+    replay = true,
+  ) {
     // Since we can't measure the rows on the server, we can't stick the rows properly.
     if (!this._isBrowser) {
       return;
     }
 
+    if (replay) {
+      this._updateStickRowsReplayQueue({
+        rowsToStick: [...rowsToStick],
+        stickyStates: [...stickyStates],
+        position,
+      });
+    }
+
     // Coalesce with other sticky row updates (top/bottom), sticky columns updates
     // (and potentially other changes like column resize).
     this._coalescedStyleScheduler.schedule(() => {
@@ -440,24 +460,40 @@ export class StickyStyler {
 
   /**
    * Retreives the most recently observed size of the specified element from the cache, or
-   * meaures it directly if not yet cached.
+   * schedules it to be measured directly if not yet cached.
    */
   private _retrieveElementSize(element: HTMLElement): {width: number; height: number} {
     const cachedSize = this._elemSizeCache.get(element);
-    if (cachedSize) {
+    if (cachedSize != null) {
       return cachedSize;
     }
-
-    const clientRect = element.getBoundingClientRect();
-    const size = {width: clientRect.width, height: clientRect.height};
-
     if (!this._resizeObserver) {
-      return size;
+      return this._retrieveElementSizeImmediate(element);
     }
 
-    this._elemSizeCache.set(element, size);
     this._resizeObserver.observe(element, {box: 'border-box'});
-    return size;
+    setTimeout(() => {
+      if (this._elemSizeCache.get(element) != null) {
+        return;
+      }
+
+      const size = this._retrieveElementSizeImmediate(element);
+      this._elemSizeCache.set(element, size);
+
+      if (!this._stickyReplayTimeout) {
+        this._scheduleStickReplay();
+      }
+    }, 10);
+
+    return {width: 0, height: 0};
+  }
+
+  /**
+   * Returns the size of the specified element by direct measurement.
+   */
+  private _retrieveElementSizeImmediate(element: HTMLElement): {width: number; height: number} {
+    const clientRect = element.getBoundingClientRect();
+    return {width: clientRect.width, height: clientRect.height};
   }
 
   /**
@@ -468,7 +504,7 @@ export class StickyStyler {
     this._removeFromStickyColumnReplayQueue(params.rows);
 
     // No need to replay if a flush is pending.
-    if (this._stickyColumnsReplayTimeout) {
+    if (this._stickyReplayTimeout) {
       return;
     }
 
@@ -486,9 +522,22 @@ export class StickyStyler {
     );
   }
 
+  private _updateStickRowsReplayQueue(params: UpdateStickRowsParams) {
+    // No need to replay if a flush is pending.
+    if (this._stickyReplayTimeout) {
+      return;
+    }
+
+    this._updatedStickRowsParamsToReplay = this._updatedStickRowsParamsToReplay.filter(
+      entry => entry.position !== params.position,
+    );
+
+    this._updatedStickRowsParamsToReplay.push(params);
+  }
+
   /** Update _elemSizeCache with the observed sizes. */
   private _updateCachedSizes(entries: ResizeObserverEntry[]) {
-    let needsColumnUpdate = false;
+    let needsUpdate = false;
     for (const entry of entries) {
       const newEntry = entry.borderBoxSize?.length
         ? {
@@ -500,35 +549,52 @@ export class StickyStyler {
             height: entry.contentRect.height,
           };
 
+      const cachedSize = this._elemSizeCache.get(entry.target as HTMLElement);
       if (
-        newEntry.width !== this._elemSizeCache.get(entry.target as HTMLElement)?.width &&
-        isCell(entry.target)
+        (newEntry.width !== cachedSize?.width && isCell(entry.target)) ||
+        (newEntry.height !== cachedSize?.height && isRow(entry.target))
       ) {
-        needsColumnUpdate = true;
+        needsUpdate = true;
       }
 
       this._elemSizeCache.set(entry.target as HTMLElement, newEntry);
     }
 
-    if (needsColumnUpdate && this._updatedStickyColumnsParamsToReplay.length) {
-      if (this._stickyColumnsReplayTimeout) {
-        clearTimeout(this._stickyColumnsReplayTimeout);
-      }
+    if (needsUpdate) {
+      this._scheduleStickReplay();
+    }
+  }
 
-      this._stickyColumnsReplayTimeout = setTimeout(() => {
-        for (const update of this._updatedStickyColumnsParamsToReplay) {
-          this.updateStickyColumns(
-            update.rows,
-            update.stickyStartStates,
-            update.stickyEndStates,
-            true,
-            false,
-          );
-        }
-        this._updatedStickyColumnsParamsToReplay = [];
-        this._stickyColumnsReplayTimeout = null;
-      }, 0);
+  /** Schedule a defered replay of enqueued sticky column operations. */
+  private _scheduleStickReplay() {
+    if (
+      !this._updatedStickyColumnsParamsToReplay.length &&
+      !this._updatedStickRowsParamsToReplay.length
+    ) {
+      return;
+    }
+
+    if (this._stickyReplayTimeout) {
+      clearTimeout(this._stickyReplayTimeout);
     }
+
+    this._stickyReplayTimeout = setTimeout(() => {
+      for (const update of this._updatedStickyColumnsParamsToReplay) {
+        this.updateStickyColumns(
+          update.rows,
+          update.stickyStartStates,
+          update.stickyEndStates,
+          true,
+          false,
+        );
+      }
+      for (const update of this._updatedStickRowsParamsToReplay) {
+        this.stickRows(update.rowsToStick, update.stickyStates, update.position, false);
+      }
+      this._updatedStickyColumnsParamsToReplay = [];
+      this._updatedStickRowsParamsToReplay = [];
+      this._stickyReplayTimeout = null;
+    }, 0);
   }
 }
 
@@ -537,3 +603,9 @@ function isCell(element: Element) {
     element.classList.contains(klass),
   );
 }
+
+function isRow(element: Element) {
+  return ['cdk-row', 'cdk-header-row', 'cdk-footer-row'].some(klass =>
+    element.classList.contains(klass),
+  );
+}