From f6bc1df555bfc22502921395948c655a9386f56b Mon Sep 17 00:00:00 2001 From: Martin Guillon Date: Wed, 2 Dec 2020 16:57:25 +0100 Subject: [PATCH 1/5] faster style-scope setPropertyValues No need for so many for loops --- .../core/ui/styling/css-selector/index.ts | 2 +- packages/core/ui/styling/style-scope.ts | 63 ++++++++----------- 2 files changed, 26 insertions(+), 39 deletions(-) diff --git a/packages/core/ui/styling/css-selector/index.ts b/packages/core/ui/styling/css-selector/index.ts index c735dce98..717adbdaa 100644 --- a/packages/core/ui/styling/css-selector/index.ts +++ b/packages/core/ui/styling/css-selector/index.ts @@ -669,7 +669,7 @@ interface ChangeAccumulator { export class SelectorsMatch implements ChangeAccumulator { public changeMap: ChangeMap = new Map(); - public selectors; + public selectors: SelectorCore[]; public addAttribute(node: T, attribute: string): void { const deps: Changes = this.properties(node); diff --git a/packages/core/ui/styling/style-scope.ts b/packages/core/ui/styling/style-scope.ts index 5d5ba5a7c..553a2d192 100644 --- a/packages/core/ui/styling/style-scope.ts +++ b/packages/core/ui/styling/style-scope.ts @@ -398,7 +398,7 @@ export class CssState { _onDynamicStateChangeHandler: () => void; _appliedChangeMap: Readonly>; - _appliedPropertyValues: Readonly>; + _appliedPropertyValues: Record; _appliedAnimations: ReadonlyArray; _appliedSelectorsVersion: number; @@ -552,60 +552,47 @@ export class CssState { const newPropertyValues = new view.style.PropertyBag(); matchingSelectors.forEach((selector) => selector.ruleset.declarations.forEach((declaration) => (newPropertyValues[declaration.property] = declaration.value))); - const oldProperties = this._appliedPropertyValues; - - let isCssExpressionInUse = false; - + const oldProperties = this._appliedPropertyValues || {}; // Update values for the scope's css-variables view.style.resetScopedCssVariables(); + + const valuesToApply = {}; for (const property in newPropertyValues) { - const value = newPropertyValues[property]; + let value = newPropertyValues[property]; + if (property in oldProperties && oldProperties[property] === value) { + // Skip unchanged values + delete oldProperties[property] + continue; + } if (isCssVariable(property)) { view.style.setScopedCssVariable(property, value); - + delete oldProperties[property] delete newPropertyValues[property]; continue; } - - isCssExpressionInUse = isCssExpressionInUse || isCssVariableExpression(value) || isCssCalcExpression(value); - } - - if (isCssExpressionInUse) { - // Evalute css-expressions to get the latest values. - for (const property in newPropertyValues) { - const value = evaluateCssExpressions(view, property, newPropertyValues[property]); - if (value === unsetValue) { - delete newPropertyValues[property]; - continue; - } - - newPropertyValues[property] = value; + if (isCssVariableExpression(value) || isCssCalcExpression(value)) { + value = evaluateCssExpressions(view, property, newPropertyValues[property]); } + if (value === unsetValue) { + delete newPropertyValues[property]; + continue; + } + valuesToApply[property] = value; } - // Property values are fully updated, freeze the object to be used for next update. - Object.freeze(newPropertyValues); - // Unset removed values for (const property in oldProperties) { - if (!(property in newPropertyValues)) { - if (property in view.style) { - view.style[`css:${property}`] = unsetValue; - } else { - // TRICKY: How do we unset local value? - } + if (property in view.style) { + view.style[`css:${property}`] = unsetValue; + } + else { + // TRICKY: How do we unset local value? } } - // Set new values to the style - for (const property in newPropertyValues) { - if (oldProperties && property in oldProperties && oldProperties[property] === newPropertyValues[property]) { - // Skip unchanged values - continue; - } - - const value = newPropertyValues[property]; + for (const property in valuesToApply) { + const value = valuesToApply[property]; try { if (property in view.style) { view.style[`css:${property}`] = value; From ca1c9f25197ed2cada297187bfeac1ef6cc956aa Mon Sep 17 00:00:00 2001 From: Martin Guillon Date: Thu, 3 Dec 2020 12:30:30 +0100 Subject: [PATCH 2/5] fix: ensure we dont get udplicates in oldProperties and newPropertyValues --- packages/core/ui/styling/style-scope.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/ui/styling/style-scope.ts b/packages/core/ui/styling/style-scope.ts index 553a2d192..ec0eb462a 100644 --- a/packages/core/ui/styling/style-scope.ts +++ b/packages/core/ui/styling/style-scope.ts @@ -562,12 +562,12 @@ export class CssState { let value = newPropertyValues[property]; if (property in oldProperties && oldProperties[property] === value) { // Skip unchanged values - delete oldProperties[property] + delete oldProperties[property]; continue; } + delete oldProperties[property]; if (isCssVariable(property)) { view.style.setScopedCssVariable(property, value); - delete oldProperties[property] delete newPropertyValues[property]; continue; } From 2baccd42b5db1a5ae8ab02d991fea12d2d9d7cdc Mon Sep 17 00:00:00 2001 From: Martin Guillon Date: Thu, 3 Dec 2020 16:27:37 +0100 Subject: [PATCH 3/5] unecessary --- packages/core/ui/styling/style-scope.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/ui/styling/style-scope.ts b/packages/core/ui/styling/style-scope.ts index ec0eb462a..9cbf5a051 100644 --- a/packages/core/ui/styling/style-scope.ts +++ b/packages/core/ui/styling/style-scope.ts @@ -552,7 +552,7 @@ export class CssState { const newPropertyValues = new view.style.PropertyBag(); matchingSelectors.forEach((selector) => selector.ruleset.declarations.forEach((declaration) => (newPropertyValues[declaration.property] = declaration.value))); - const oldProperties = this._appliedPropertyValues || {}; + const oldProperties = this._appliedPropertyValues; // Update values for the scope's css-variables view.style.resetScopedCssVariables(); From d3d780ee4576292fe1fe3cf2b117b16ced8040ce Mon Sep 17 00:00:00 2001 From: Martin Guillon Date: Thu, 3 Dec 2020 21:12:12 +0100 Subject: [PATCH 4/5] make _appliedPropertyValues private --- packages/core/ui/styling/style-scope.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/ui/styling/style-scope.ts b/packages/core/ui/styling/style-scope.ts index 9cbf5a051..8a8321e21 100644 --- a/packages/core/ui/styling/style-scope.ts +++ b/packages/core/ui/styling/style-scope.ts @@ -398,7 +398,7 @@ export class CssState { _onDynamicStateChangeHandler: () => void; _appliedChangeMap: Readonly>; - _appliedPropertyValues: Record; + private _appliedPropertyValues: Record; _appliedAnimations: ReadonlyArray; _appliedSelectorsVersion: number; From 407d57ff6244919d0668121ac5ad26f02e40b6e1 Mon Sep 17 00:00:00 2001 From: Martin Guillon Date: Sun, 6 Dec 2020 14:44:30 +0100 Subject: [PATCH 5/5] fix: fix tsc errors --- packages/core/ui/styling/style-scope.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/core/ui/styling/style-scope.ts b/packages/core/ui/styling/style-scope.ts index 8a8321e21..5ab4f2cda 100644 --- a/packages/core/ui/styling/style-scope.ts +++ b/packages/core/ui/styling/style-scope.ts @@ -386,7 +386,7 @@ if (application.hasLaunched()) { export class CssState { static emptyChangeMap: Readonly> = Object.freeze(new Map()); - static emptyPropertyBag: Readonly> = Object.freeze({}); + static emptyPropertyBag: Record = {}; static emptyAnimationArray: ReadonlyArray = Object.freeze([]); static emptyMatch: Readonly> = { selectors: [], @@ -398,7 +398,7 @@ export class CssState { _onDynamicStateChangeHandler: () => void; _appliedChangeMap: Readonly>; - private _appliedPropertyValues: Record; + private _appliedPropertyValues: Record = CssState.emptyPropertyBag; _appliedAnimations: ReadonlyArray; _appliedSelectorsVersion: number; @@ -663,7 +663,6 @@ export class CssState { } } CssState.prototype._appliedChangeMap = CssState.emptyChangeMap; -CssState.prototype._appliedPropertyValues = CssState.emptyPropertyBag; CssState.prototype._appliedAnimations = CssState.emptyAnimationArray; CssState.prototype._matchInvalid = true;