Performance Issue - css query selectors - forced reflow is a likely performance bottleneck

[JRJurman]

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.

[JRJurman]

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)

[JRJurman]

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