Performance Problems with getComputedStyle() (Layout Thrashing).

[kaladay]

Tthe getComputedStyle() ends up forcing a layout redraw / reflow, see:

• https://gist.github.com/paulirish/5d52fb081b3570c81e3a
• https://kellegous.com/j/2013/01/26/layout-performance/
• Performance: Avoid getComputedStyle (Known performance drag) on Sticky microsoft/fluentui#8780

In testing this really seems to happen on calls to getPropertyValue() as seen here:

• weaver-components/projects/wvr-elements/src/lib/core/theme/theme.service.ts

  Line 78 in 05846d9

  const themeColorInterval = parseInt(computedStyle.getPropertyValue('--theme-color-interval')

• weaver-components/projects/wvr-elements/src/lib/core/theme/theme.service.ts

  Line 109 in 05846d9

  const alertBackgroundLevel = Number(computedStyle.getPropertyValue('--alert-bg-level')

Consider the strategy from the referenced issues:

- Don't call getComputedStyle as much as possible.
- Don't call it in a loop (multiple force render.)
- If you have to have do it.
  a. do it at the debounce & after request animation frame. (Thus blink is already eval most of the data that you ask for.)
  b. stamp the class that you are looking for rather than ask the style to get for it.

Not to mention, according to the specs (https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) the values may be intentially incorrect.

...Returned values are sometimes deliberately inaccurate. To avoid the “CSS History Leak” security issue, browsers may lie about the computed styles for a visited link, returning values as if the user never visited the linked URL...