Skip to content
This repository has been archived by the owner on Aug 11, 2022. It is now read-only.

Warn when a JS operation like getBoundingClientRect causes a hidden subtree to be 'activated/de-virtualized/rendered' #144

Open
bgirard opened this issue Mar 24, 2020 · 3 comments
Assignees
Labels
enhancement this issue tracks a future enhancement

Comments

@bgirard
Copy link
Member

bgirard commented Mar 24, 2020

AIUI from Issue #112, certain calls such as getBoundingClientRect() may defeat the optimization by causing the subtree to get activated/laid out.

Perhaps it would make sense to suggest implementation give a warning. For will-change, Firefox's implementation will issue a warning. IIRC it will warn once per page and will ignore if the total will-change surface area is 3x the document viewport to avoid OOM.

I think it would make sense to surface a one-off warning when code is defeating the optimization inadvertently. For instance I'm not sure if querySelecterAll('img') would defeat the optimization or not.

@chrishtr
Copy link
Collaborator

I don't think Blink or other browsers are likely to be smart enough to know that an 'img' query selector doesn't require style.

@bgirard
Copy link
Member Author

bgirard commented Mar 27, 2020

Then do operations like querySelecterAll on ancestors defeat this optimization? Do we have to avoid using them entirely to realize the full win? This could pose large challenges for some code bases that us them a lot. Perhaps this needs a separate discussion: What APIs would become more costly? Is there a strong use case for querying selector only over the active elements.

@chrishtr
Copy link
Collaborator

Sorry I was being dumb somehow. querySelectorAll does not force style recalc. It only need to look at ids, classes, tag names and attributes.

Therefore querySelectorAll and friends are just fine to call on hidden subtrees.

@vmpstr vmpstr added the enhancement this issue tracks a future enhancement label Sep 7, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement this issue tracks a future enhancement
Projects
None yet
Development

No branches or pull requests

3 participants