javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: improve attribute selectors by adding single listeners (#10384)

Browse Source
This commit is contained in:
Eduardo Speroni
2024-06-28 18:55:12 -03:00
committed by GitHub
parent b8fff3833e
commit bb83addb5c
3 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/css/system-classes.ts
View File

@@ -6,6 +6,7 @@ export namespace CSSUtils {
export const CLASS_PREFIX = 'ns-'; export const CLASS_PREFIX = 'ns-';
export const MODAL_ROOT_VIEW_CSS_CLASS = `${CLASS_PREFIX}${MODAL}`; export const MODAL_ROOT_VIEW_CSS_CLASS = `${CLASS_PREFIX}${MODAL}`;
export const ROOT_VIEW_CSS_CLASS = `${CLASS_PREFIX}${ROOT}`; export const ROOT_VIEW_CSS_CLASS = `${CLASS_PREFIX}${ROOT}`;
export const IgnoredCssDynamicAttributeTracking = new Set<string>();
export function getSystemCssClasses(): string[] { export function getSystemCssClasses(): string[] {
return cssClasses; return cssClasses;

4
packages/core/ui/styling/css-selector.ts
View File

@@ -5,6 +5,7 @@ import { Trace } from '../../trace';
import { isNullOrUndefined } from '../../utils/types'; import { isNullOrUndefined } from '../../utils/types';
import * as ReworkCSS from '../../css'; import * as ReworkCSS from '../../css';
import { CSSUtils } from '../../css/system-classes';
/** /**
* An interface describing the shape of a type on which the selectors may apply. * An interface describing the shape of a type on which the selectors may apply.
@@ -1014,6 +1015,9 @@ export class SelectorsMatch<T extends Node> implements ChangeAccumulator {
public selectors: SelectorCore[]; public selectors: SelectorCore[];
public addAttribute(node: T, attribute: string): void { public addAttribute(node: T, attribute: string): void {
if (CSSUtils.IgnoredCssDynamicAttributeTracking.has(attribute)) {
return;
}
const deps: Changes = this.properties(node); const deps: Changes = this.properties(node);
if (!deps.attributes) { if (!deps.attributes) {
deps.attributes = new Set(); deps.attributes = new Set();

21
packages/core/ui/styling/style-scope.ts
View File

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