display-locking icon indicating copy to clipboard operation
display-locking copied to clipboard

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

Open bgirard opened this issue 4 years ago • 3 comments

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.

bgirard avatar Mar 24 '20 22:03 bgirard

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.

chrishtr avatar Mar 27 '20 00:03 chrishtr

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.

bgirard avatar Mar 27 '20 00:03 bgirard

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.

chrishtr avatar Mar 27 '20 05:03 chrishtr