5 ms·
> The advice to "touch the DOM as little as possible" stems from the fact that the DOM has so many performance pitfalls. What are those performance pitfalls?
by Hurtak 10y ago
> The advice to "touch the DOM as little as possible" stems from the fact that the DOM has so many performance pitfalls.
What are those performance pitfalls?
The only ones I know are that if you read something related to the layout size (offsetHeight), it might cause layout recalculation. And obviously if you modify how element looks like (innerHTML, changing class, etc).
This doesn't seem like much (assuming I dit not forget something). The first one is not obvious through.
- jakelazaroff 10y agoOne more pitfall: if you add or remove elements, it also causes a reflow. A common pitfall with applications that render lists is that they do append operations iteratively (with a reflow for each iteration) rather than in one go (with only one reflow). http://jankfree.org/ http://jankfree.org/ is a good resource for causes of slowdown.
- EdSharkey 10y agoI believe this is the comprehensive list: https://gist.github.com/paulirish/5d52fb081b3570c81e3a https://gist.github.com/paulirish/5d52fb081b3570c81e3a My favorite of the doozies is _reading_ from some properties on mouse events will cause a reflow.