perf: improve attribute selectors by adding single listeners

edusperoni · NathanWalker · commit 632fea093e5d · 2024-04-26T11:36:59.000-07:00
diff --git a/packages/core/ui/styling/style-scope.ts b/packages/core/ui/styling/style-scope.ts
@@ -22,6 +22,7 @@ import * as capm from './css-animation-parser';
 import { sanitizeModuleName } from '../../utils/common';
 import { resolveModuleName } from '../../module-name-resolver';
 import { cleanupImportantFlags } from './css-utils';
+import { Observable, PropertyChangeData } from '../../data/observable';
 
 let cssAnimationParserModule: typeof capm;
 function ensureCssAnimationParserModule() {
@@ -418,6 +419,8 @@ export class CssState {
 	_matchInvalid: boolean;
 	_playsKeyframeAnimations: boolean;
 
+	private _dynamicUpdateListenerMap: Map<ViewBase, (t: any) => void> = new Map();
+
 	constructor(private viewRef: WeakRef<ViewBase>) {
 		this._onDynamicStateChangeHandler = () => this.updateDynamicState();
 	}
@@ -650,9 +653,14 @@ export class CssState {
 		const changeMap = this._match.changeMap;
 		changeMap.forEach((changes, view) => {
 			if (changes.attributes) {
-				changes.attributes.forEach((attribute) => {
-					view.addEventListener(attribute + 'Change', this._onDynamicStateChangeHandler);
-				});
+				const attributes = changes.attributes;
+				const listener = (args: PropertyChangeData) => {
+					if (attributes.has(args.propertyName)) {
+						this._onDynamicStateChangeHandler();
+					}
+				};
+				this._dynamicUpdateListenerMap.set(view, listener);
+				view.addEventListener(Observable.propertyChangeEvent, listener);
 			}
 			if (changes.pseudoClasses) {
 				changes.pseudoClasses.forEach((pseudoClass) => {
@@ -669,10 +677,8 @@ export class CssState {
 
 	private unsubscribeFromDynamicUpdates(): void {
 		this._appliedChangeMap.forEach((changes, view) => {
-			if (changes.attributes) {
-				changes.attributes.forEach((attribute) => {
-					view.removeEventListener(attribute + 'Change', this._onDynamicStateChangeHandler);
-				});
+			if (this._dynamicUpdateListenerMap.has(view)) {
+				view.removeEventListener(Observable.propertyChangeEvent, this._dynamicUpdateListenerMap.get(view));
 			}
 			if (changes.pseudoClasses) {
 				changes.pseudoClasses.forEach((pseudoClass) => {
@@ -684,6 +690,7 @@ export class CssState {
 				});
 			}
 		});
+		this._dynamicUpdateListenerMap.clear();
 		this._appliedChangeMap = CssState.emptyChangeMap;
 	}
 
