perf: improve attribute selectors by adding single listeners

This commit is contained in:
Eduardo Speroni
2023-09-21 18:32:25 -03:00
committed by Nathan Walker
parent 84e1a67d6d
commit 3a7d6c7352

View File

@@ -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;
}