faster style-scope setPropertyValues

[farfromrefug]

trafficstars

That Pr makes the style-scope setPropertyValues much faster. It tries not to do so many loops. The only real change is the fact that i dont freeze the _appliedPropertyValues object anymore. I need that to go faster and as the object is not used outside of that function it does not seem to make a difference.

Now do we have tests which would ensure that is not breaking anything?

[farfromrefug]

@NathanaelA no benchmark no. Just globally faster as you loop through new props only once and loop through less old properties. Would be nice to have benchmarks around all that properties/CSS thing

[NathanaelA]

You can add some bench marks into the code; rename the existing function to _setPropertyValues and create a new setPropertyValues and add const x = Date.now(); this._setPropertyValues(...); y = Date.now(); console.log(y-x); it isn't totally precise but it will give a rough idea of the speed.

Then run it using the prior code with a heavy css app (or maybe even the automated app) a couple times and copy the numbers. Then use your new code with the same apps.

This will give you a pretty good idea if this is faster, slower or even majorly faster/slower.

[rigor789]

You can add some bench marks into the code; rename the existing function to _setPropertyValues and create a new setPropertyValues and add const x = Date.now(); this._setPropertyValues(...); y = Date.now(); console.log(y-x); it isn't totally precise but it will give a rough idea of the speed.

@farfromrefug @NathanaelA even simpler:

console.time('setPropertyValues')
this._setPropertyValues(...);
console.timeEnd('setPropertyValues')

Will print the time it has taken :D

[NathanWalker]

@farfromrefug I've updated this PR with latest main and looks like just 4 tests are affected by these changes:

  === ALL TESTS COMPLETE ===
  1632 OK, 4 failed
  DURATION: 22370.61 ms
  === END OF TESTS ===
  Test: STYLE.test_css_calc_and_variables FAILED: Stack - width === 10% At /value actual: '1' and expected: '0.1' differ.
  Test: STYLE.test_css_variable_fallback FAILED: undefined-css-variable-without-fallback Actual: <#0000FF>(string). Expected: <undefined>(undefined)
  Test: STYLE.test_css_variables FAILED: Cannot read property 'hex' of undefined
  Test: STYLE.test_nested_css_calc_and_variables FAILED: Stack - width === 200% At /value actual: '1' and expected: '2' differ.

Would you be able to peek sometime? We can queue this up to include in 8.4. It does appear that these changes will make the tests finish in faster time which leads me to believe there are some perf gains here.

[farfromrefug]

@NathanWalker all tests are now passing. Hope i got it all right. The issue was that css vars/exps need to be handled separately in the sense that all css vars must be evaluated before we can evaluate css expressions. I added a comment so we dont forget about it anymore. It should not make things any slower