search

Tram-One / tram-one

🚋 Legacy View Framework For Vanilla Javascript
http://tram-one.io/
MIT License
36 stars 8 forks source link

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

Open JRJurman opened 3 years ago

JRJurman commented 3 years ago

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: forced reflow is a likely performance bottleneck screenshot

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 commented 3 years ago

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 commented 3 years ago

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