feat: store getComputedStyle result to avoid redoing that work #1048
Conversation
🦋 Changeset detectedLatest commit: 109ccbd The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
…table objects around
TomPridham
force-pushed
the
accessible-name-perf
branch
from
4a4bcfb
to
8ea82e3
Compare
| // we don't cache the pseudoElement styles | ||
| if (pseudoElement !== undefined) { | ||
| return _getComputedStyle(el, pseudoElement); | ||
| } |
There was a problem hiding this comment.
we could cache the pseudo element styles if the Map was of type MapLike<Element, {[key: pseudoElement]: CSSStyleDeclaration}>, but that seemed kind of over the top
There was a problem hiding this comment.
it also didn't seem like it was possible they were called more than once per element
TomPridham
force-pushed
the
accessible-name-perf
branch
from
3ca0724
to
7c78f49
Compare
| if (pseudoElement !== undefined) { | ||
| return _getComputedStyle(el, pseudoElement); | ||
| } | ||
| const cachedStyles = computedStyles.get(el); |
There was a problem hiding this comment.
Worth calling out that this lookup is not the expected O(1) but O(N) which is especially important since this may negate any benefit we get for caching.
I feel like we should only cache when the built-in Map is available. If you're testing in IE11, you don't need the caching anyway since you're in a browser already which has less issues with computing styles.
There was a problem hiding this comment.
that makes sense. i left a comment in the getComputedStyles function about the polyfill being slower. let me know if you want me to document that somewhere else as well
There was a problem hiding this comment.
I'm saying we shouldn't use the polyfill at all and only cache when we know the lookup is O(1).
There was a problem hiding this comment.
sorry, i should have been clearer. i left a comment saying it was slower and that was why we were skipping using the caching if Map is undefined
There was a problem hiding this comment.
i just removed the polyfill completely so there won't be a chance someone stumbles into the slow behavior
There was a problem hiding this comment.
i did end up having to include the global type for Map because otherwise TS complained about needing to change the target
eps1lon
force-pushed
the
accessible-name-perf
branch
from
d056107
to
f2b6eb5
Compare
|
sounds good. thanks! |
does some work to address #1011
all this does is store the results of callinggetComputedStylesfrom theisHiddenfunction and reuse that later on when possible to avoid calculating it more than necessary. in the test it only saves a single extra call, but was 3x as fast in the test repo linked in that issueuse a caching version of
getComputedStyleto avoid redoing that work since it's one of the more expensive functions calledupdated timings with the new implementation
before:
after: