getBoundingClientRect causes a DOM reflow when the DOM has been written to between calls (see http://stackoverflow.com/a/37686736/945863). So to avoid this, first call getBoundingClientRect on each element in one loop with no intermediate writes to the DOM, then use those results while writing to the DOM in a second loop.
Potential issue with this PR: I'm not sure whether frags is outwardly visible. I use the property _newPos on each frag, which, if it's used by external code, will be stomped.
Before this change, on a list of 23 elements, I was seeing this performance in Chrome:
Notice that each call to getBoundingClientRect takes around 30ms. With these changes, it now looks like:
And the whole call to applyMoveTransition is down to 40ms.
yyx990803
commented
8 years ago
getBoundingClientRectcauses a DOM reflow when the DOM has been written to between calls (see http://stackoverflow.com/a/37686736/945863). So to avoid this, first callgetBoundingClientRecton each element in one loop with no intermediate writes to the DOM, then use those results while writing to the DOM in a second loop.Potential issue with this PR: I'm not sure whether
fragsis outwardly visible. I use the property_newPoson eachfrag, which, if it's used by external code, will be stomped.Before this change, on a list of 23 elements, I was seeing this performance in Chrome:
Notice that each call to
getBoundingClientRecttakes around 30ms. With these changes, it now looks like:And the whole call to
applyMoveTransitionis down to 40ms.