perf(aria/grid): performance when selecting in a large grid

src/aria/grid/grid-cell.ts

@@ -8,6 +8,7 @@
 
 import {_IdGenerator} from '@angular/cdk/a11y';
 import {
+  afterRenderEffect,
   booleanAttribute,
   computed,
   contentChildren,
@@ -17,6 +18,7 @@ import {
   input,
   model,
   Signal,
+  Renderer2,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
 import {GridCellPattern} from '../private';
@@ -41,26 +43,11 @@ import {GRID_CELL, GRID_ROW} from './grid-tokens';
 @Directive({
   selector: '[ngGridCell]',
   exportAs: 'ngGridCell',
-  host: {
-    '[attr.role]': 'role()',
-    '[attr.id]': '_pattern.id()',
-    '[attr.rowspan]': '_pattern.rowSpan()',
-    '[attr.colspan]': '_pattern.colSpan()',
-    '[attr.data-active]': 'active()',
-    '[attr.data-anchor]': '_pattern.anchor()',
-    '[attr.aria-disabled]': '_pattern.disabled()',
-    '[attr.aria-rowspan]': '_pattern.rowSpan()',
-    '[attr.aria-colspan]': '_pattern.colSpan()',
-    '[attr.aria-rowindex]': '_pattern.ariaRowIndex()',
-    '[attr.aria-colindex]': '_pattern.ariaColIndex()',
-    '[attr.aria-selected]': '_pattern.ariaSelected()',
-    '[tabindex]': '_tabIndex()',
-  },
   providers: [{provide: GRID_CELL, useExisting: GridCell}],
 })
 export class GridCell {
-  /** A reference to the host element. */
   private readonly _elementRef = inject(ElementRef);
+  private readonly _renderer = inject(Renderer2);
 
   /** A reference to the host element. */
   readonly element = this._elementRef.nativeElement as HTMLElement;
@@ -136,7 +123,39 @@ export class GridCell {
     element: () => this.element,
   });
 
-  constructor() {}
+  constructor() {
+    // Note: we don't go through host bindings for these, because the
+    // effect allows us to batch the reads together which drastically
+    // improves rendering performance in large grids (see #32759).
+    afterRenderEffect({
+      write: () => {
+        const {_pattern: pattern, _toggleAttribute: toggle} = this;
+        const rowSpan = pattern.rowSpan();
+        const colSpan = pattern.colSpan();
+        toggle('role', this.role());
+        toggle('id', pattern.id());
+        toggle('rowspan', rowSpan);
+        toggle('colspan', rowSpan);
+        toggle('aria-rowspan', rowSpan);
+        toggle('aria-colspan', colSpan);
+        toggle('data-active', this.active());
+        toggle('data-anchor', pattern.anchor());
+        toggle('aria-disabled', pattern.disabled());
+        toggle('aria-rowindex', pattern.ariaRowIndex());
+        toggle('aria-colindex', pattern.ariaColIndex());
+        toggle('aria-selected', pattern.ariaSelected());
+        toggle('tabindex', this._tabIndex());
+      },
+    });
+  }
+
+  private _toggleAttribute = (name: string, value: unknown) => {
+    if (value == null) {
+      this._renderer.removeAttribute(this.element, name);
+    } else {
+      this._renderer.setAttribute(this.element, name, value as string);
+    }
+  };
 
   /** Gets the cell widget pattern for a given element. */
   private _getWidget(element: Element | null | undefined): any | undefined {