perf(column-resize): Coalesce dom updates in column resize to reduce layout thrashing.

Author: kseamon

src/cdk-experimental/column-resize/overlay-handle.ts

@@ -10,7 +10,7 @@ import {AfterViewInit, Directive, ElementRef, OnDestroy, NgZone} from '@angular/
 import {coerceCssPixelValue} from '@angular/cdk/coercion';
 import {Directionality} from '@angular/cdk/bidi';
 import {ESCAPE} from '@angular/cdk/keycodes';
-import {CdkColumnDef} from '@angular/cdk/table';
+import {CdkColumnDef, _CoalescedStyleScheduler} from '@angular/cdk/table';
 import {fromEvent, Subject, merge} from 'rxjs';
 import {
   distinctUntilChanged,
@@ -47,6 +47,7 @@ export abstract class ResizeOverlayHandle implements AfterViewInit, OnDestroy {
   protected abstract readonly ngZone: NgZone;
   protected abstract readonly resizeNotifier: ColumnResizeNotifierSource;
   protected abstract readonly resizeRef: ResizeRef;
+  protected abstract readonly styleScheduler: _CoalescedStyleScheduler;
 
   ngAfterViewInit() {
     this._listenForMouseEvents();
@@ -91,7 +92,7 @@ export abstract class ResizeOverlayHandle implements AfterViewInit, OnDestroy {
     const startX = mousedownEvent.screenX;
 
     const initialSize = this._getOriginWidth();
-    let overlayOffset = this._getOverlayOffset();
+    let overlayOffset = 0;
     let originOffset = this._getOriginOffset();
     let size = initialSize;
     let overshot = 0;
@@ -140,17 +141,19 @@ export abstract class ResizeOverlayHandle implements AfterViewInit, OnDestroy {
       this.resizeNotifier.triggerResize.next(
           {columnId: this.columnDef.name, size: computedNewSize, previousSize: size});
 
-      const originNewSize = this._getOriginWidth();
-      const originNewOffset = this._getOriginOffset();
-      const originOffsetDeltaX = originNewOffset - originOffset;
-      const originSizeDeltaX = originNewSize - size;
-      size = originNewSize;
-      originOffset = originNewOffset;
+      this.styleScheduler.scheduleEnd(() => {
+        const originNewSize = this._getOriginWidth();
+        const originNewOffset = this._getOriginOffset();
+        const originOffsetDeltaX = originNewOffset - originOffset;
+        const originSizeDeltaX = originNewSize - size;
+        size = originNewSize;
+        originOffset = originNewOffset;
 
-      overshot += deltaX + (this._isLtr() ? -originSizeDeltaX : originSizeDeltaX);
-      overlayOffset += originOffsetDeltaX + (this._isLtr() ? originSizeDeltaX : 0);
+        overshot += deltaX + (this._isLtr() ? -originSizeDeltaX : originSizeDeltaX);
+        overlayOffset += originOffsetDeltaX + (this._isLtr() ? originSizeDeltaX : 0);
 
-      this._updateOverlayOffset(overlayOffset);
+        this._updateOverlayOffset(overlayOffset);
+      });
     });
   }
 
@@ -167,12 +170,9 @@ export abstract class ResizeOverlayHandle implements AfterViewInit, OnDestroy {
     return this.resizeRef.origin.nativeElement!.offsetLeft;
   }
 
-  private _getOverlayOffset(): number {
-    return parseInt(this.resizeRef.overlayRef.overlayElement.style.left!, 10);
-  }
-
   private _updateOverlayOffset(offset: number): void {
-    this.resizeRef.overlayRef.overlayElement.style.left = coerceCssPixelValue(offset);
+    this.resizeRef.overlayRef.overlayElement.style.transform =
+        `translateX(${coerceCssPixelValue(offset)})`;
   }
 
   private _isLtr(): boolean {

src/cdk-experimental/column-resize/resizable.ts

@@ -20,7 +20,7 @@ import {
 import {Directionality} from '@angular/cdk/bidi';
 import {ComponentPortal, PortalInjector} from '@angular/cdk/portal';
 import {Overlay, OverlayRef} from '@angular/cdk/overlay';
-import {CdkColumnDef} from '@angular/cdk/table';
+import {CdkColumnDef, _CoalescedStyleScheduler} from '@angular/cdk/table';
 import {merge, Subject} from 'rxjs';
 import {filter, takeUntil} from 'rxjs/operators';
 
@@ -61,18 +61,21 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   protected abstract readonly overlay: Overlay;
   protected abstract readonly resizeNotifier: ColumnResizeNotifierSource;
   protected abstract readonly resizeStrategy: ResizeStrategy;
+  protected abstract readonly styleScheduler: _CoalescedStyleScheduler;
   protected abstract readonly viewContainerRef: ViewContainerRef;
   protected abstract readonly changeDetectorRef: ChangeDetectorRef;
 
+  private _viewInitialized = false;
+
   /** The minimum width to allow the column to be sized to. */
   get minWidthPx(): number {
     return this.minWidthPxInternal;
   }
   set minWidthPx(value: number) {
     this.minWidthPxInternal = value;
 
-    if (this.elementRef.nativeElement) {
-      this.columnResize.setResized();
+    this.columnResize.setResized();
+    if (this.elementRef.nativeElement && this._viewInitialized) {
       this._applyMinWidthPx();
     }
   }
@@ -84,13 +87,15 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   set maxWidthPx(value: number) {
     this.maxWidthPxInternal = value;
 
-    if (this.elementRef.nativeElement) {
-      this.columnResize.setResized();
+    this.columnResize.setResized();
+    if (this.elementRef.nativeElement && this._viewInitialized) {
       this._applyMaxWidthPx();
     }
   }
 
   ngAfterViewInit() {
+    this._viewInitialized = true;
+
     this._listenForRowHoverEvents();
     this._listenForResizeEvents();
     this._appendInlineHandle();
@@ -251,12 +256,14 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   }
 
   private _appendInlineHandle(): void {
-    this.inlineHandle = this.document.createElement('div');
-    this.inlineHandle.tabIndex = 0;
-    this.inlineHandle.className = this.getInlineHandleCssClassName();
+    this.styleScheduler.schedule(() => {
+      this.inlineHandle = this.document.createElement('div');
+      this.inlineHandle.tabIndex = 0;
+      this.inlineHandle.className = this.getInlineHandleCssClassName();
 
-    // TODO: Apply correct aria role (probably slider) after a11y spec questions resolved.
+      // TODO: Apply correct aria role (probably slider) after a11y spec questions resolved.
 
-    this.elementRef.nativeElement!.appendChild(this.inlineHandle);
+      this.elementRef.nativeElement!.appendChild(this.inlineHandle);
+    });
   }
 }

src/cdk-experimental/column-resize/resize-strategy.ts

@@ -9,6 +9,7 @@
 import {Inject, Injectable, OnDestroy, Provider} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {coerceCssPixelValue} from '@angular/cdk/coercion';
+import {_CoalescedStyleScheduler} from '@angular/cdk/table';
 
 import {ColumnResize} from './column-resize';
 
@@ -19,6 +20,7 @@ import {ColumnResize} from './column-resize';
 @Injectable()
 export abstract class ResizeStrategy {
   protected abstract readonly columnResize: ColumnResize;
+  protected abstract readonly styleScheduler: _CoalescedStyleScheduler;
 
   /** Updates the width of the specified column. */
   abstract applyColumnSize(
@@ -42,9 +44,16 @@ export abstract class ResizeStrategy {
   /** Adjusts the width of the table element by the specified delta. */
   protected updateTableWidth(delta: number): void {
     const table = this.columnResize.elementRef.nativeElement;
-    const tableWidth = getElementWidth(table);
 
-    table.style.width = coerceCssPixelValue(tableWidth + delta);
+    if (!pendingTableResizes.has(table)) {
+      const tableWidth = getElementWidth(table);
+      this.styleScheduler.schedule(() => {
+        table.style.width = coerceCssPixelValue(tableWidth + pendingTableResizes.get(table)!);
+        pendingTableResizes.delete(table);
+      });
+    }
+
+    pendingTableResizes.set(table, (pendingTableResizes.get(table) ?? 0) + delta);
   }
 }
 
@@ -57,15 +66,23 @@ export abstract class ResizeStrategy {
  */
 @Injectable()
 export class TableLayoutFixedResizeStrategy extends ResizeStrategy {
-  constructor(protected readonly columnResize: ColumnResize) {
+  constructor(
+      protected readonly columnResize: ColumnResize,
+      protected readonly styleScheduler: _CoalescedStyleScheduler) {
     super();
   }
 
   applyColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number,
       previousSizeInPx?: number): void {
     const delta = sizeInPx - (previousSizeInPx ?? getElementWidth(columnHeader));
 
-    columnHeader.style.width = coerceCssPixelValue(sizeInPx);
+    if (delta === 0) {
+      return;
+    }
+
+    this.styleScheduler.schedule(() => {
+      columnHeader.style.width = coerceCssPixelValue(sizeInPx);
+    });
 
     this.updateTableWidth(delta);
   }
@@ -105,6 +122,7 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest
 
   constructor(
       protected readonly columnResize: ColumnResize,
+      protected readonly styleScheduler: _CoalescedStyleScheduler,
       @Inject(DOCUMENT) document: any) {
     super();
     this._document = document;
@@ -165,12 +183,14 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest
       enable = true): void {
     const properties = this._getColumnPropertiesMap(cssFriendlyColumnName);
 
-    if (enable) {
-      properties.set(key, value);
-    } else {
-      properties.delete(key);
-    }
-    this._applySizeCss(cssFriendlyColumnName);
+    this.styleScheduler.schedule(() => {
+      if (enable) {
+        properties.set(key, value);
+      } else {
+        properties.delete(key);
+      }
+      this._applySizeCss(cssFriendlyColumnName);
+    });
   }
 
   private _getStyleSheet(): CSSStyleSheet {
@@ -239,6 +259,8 @@ function coercePixelsFromFlexValue(flexValue: string|undefined): number {
   return Number(flexValue?.match(/0 0\.01 (\d+)px/)?.[1]);
 }
 
+const pendingTableResizes = new WeakMap<Element, number>();
+
 export const TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER: Provider = {
   provide: ResizeStrategy,
   useClass: TableLayoutFixedResizeStrategy,

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

@@ -31,6 +31,18 @@ export class _CoalescedStyleScheduler {
     this._currentSchedule!.subscribe(task);
   }
 
+  /**
+   * Schedules the specified task to run after all scheduled tasks.
+   * This is useful when measuring after style updates is required.
+   */
+  scheduleEnd(task: () => unknown) : void {
+    this._createScheduleIfNeeded();
+
+    this._currentSchedule!.subscribe(() => {
+      this.schedule(task);
+    });
+  }
+
   private _createScheduleIfNeeded() {
     if (this._currentSchedule) { return; }
 

src/material-experimental/column-resize/overlay-handle.ts

@@ -15,7 +15,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
-import {CdkColumnDef} from '@angular/cdk/table';
+import {CdkColumnDef, _CoalescedStyleScheduler} from '@angular/cdk/table';
 import {Directionality} from '@angular/cdk/bidi';
 import {
   ColumnResize,
@@ -49,6 +49,7 @@ export class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
       protected readonly ngZone: NgZone,
       protected readonly resizeNotifier: ColumnResizeNotifierSource,
       protected readonly resizeRef: ResizeRef,
+      protected readonly styleScheduler: _CoalescedStyleScheduler,
       @Inject(DOCUMENT) document: any) {
     super();
     this.document = document;

src/material-experimental/column-resize/resizable-directives/default-enabled-resizable.ts

@@ -18,7 +18,7 @@ import {
 import {DOCUMENT} from '@angular/common';
 import {Directionality} from '@angular/cdk/bidi';
 import {Overlay} from '@angular/cdk/overlay';
-import {CdkColumnDef} from '@angular/cdk/table';
+import {CdkColumnDef, _CoalescedStyleScheduler} from '@angular/cdk/table';
 import {
   ColumnResize,
   ColumnResizeNotifierSource,
@@ -52,6 +52,7 @@ export class MatDefaultResizable extends AbstractMatResizable {
       protected readonly overlay: Overlay,
       protected readonly resizeNotifier: ColumnResizeNotifierSource,
       protected readonly resizeStrategy: ResizeStrategy,
+      protected readonly styleScheduler: _CoalescedStyleScheduler,
       protected readonly viewContainerRef: ViewContainerRef,
       protected readonly changeDetectorRef: ChangeDetectorRef) {
     super();

src/material-experimental/column-resize/resizable-directives/resizable.ts

@@ -18,7 +18,7 @@ import {
 import {DOCUMENT} from '@angular/common';
 import {Directionality} from '@angular/cdk/bidi';
 import {Overlay} from '@angular/cdk/overlay';
-import {CdkColumnDef} from '@angular/cdk/table';
+import {CdkColumnDef, _CoalescedStyleScheduler} from '@angular/cdk/table';
 import {
   ColumnResize,
   ColumnResizeNotifierSource,
@@ -51,6 +51,7 @@ export class MatResizable extends AbstractMatResizable {
       protected readonly overlay: Overlay,
       protected readonly resizeNotifier: ColumnResizeNotifierSource,
       protected readonly resizeStrategy: ResizeStrategy,
+      protected readonly styleScheduler: _CoalescedStyleScheduler,
       protected readonly viewContainerRef: ViewContainerRef,
       protected readonly changeDetectorRef: ChangeDetectorRef) {
     super();

src/material-experimental/column-resize/resize-strategy.ts

@@ -8,6 +8,7 @@
 
 import {Inject, Injectable, Provider} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
+import {_CoalescedStyleScheduler} from '@angular/cdk/table';
 
 import {
   ColumnResize,
@@ -25,8 +26,9 @@ export {TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER};
 export class MatFlexTableResizeStrategy extends CdkFlexTableResizeStrategy {
   constructor(
       columnResize: ColumnResize,
+      styleScheduler: _CoalescedStyleScheduler,
       @Inject(DOCUMENT) document: any) {
-    super(columnResize, document);
+    super(columnResize, styleScheduler, document);
   }
 
   protected getColumnCssClass(cssFriendlyColumnName: string): string {