Performance Issue - css query selectors - forced reflow is a likely performance bottleneck
Opened this issue · 2 comments
Summary
When building the performance tests for #167 , I realized that even the input would become slow when lots of elements were on the page. In the performance tab on chrome, I saw the following warning:
You can see, that there are two purple blocks, both with the warning "forced reflow is a likely performance bottleneck". As detailed on stack overflow this issue stems from using querySelectorAll
, which require the DOM to be fully rendered before the JS logic can continue. We do this in several places and should look into alternatives that are more performant.
Right now we are using querySelectorAll
as a shortcut to get the children of an element, but maybe we should use TreeWalkers or just recursively go through the DOM (even recursive JS may prove to be more performant)
Asked this on stack-overflow, so we'll see if we get an answer there - https://stackoverflow.com/questions/68675817/how-can-i-group-javascript-actions-that-force-reflow
Other than that, there is #169 which should tackle all the querySelectorAll
parts of the project