DOM is fast

业界有一个普遍的观点， DOM is slow。

的确，从经验上，频繁的 DOM 修改往往得到一个很慢的页面。

但是事实是，DOM is fast, layout is slow。

频繁的 DOM 修改也很容易频繁地触发 layout，拖慢了页面的速度。造成了 DOM is slow 的幻觉

The short answer is that the DOM is not slow. Adding & removing a DOM node is a few pointer swaps, not much more than setting a property on the JS object.
However, layout is slow. When you touch the DOM in any way, you set a dirty bit on the whole tree that tells the browser it needs to figure out where everything goes again. When JS hands control back to the browser, it invokes its layout algorithm (or more technically, it invokes its CSS recalc algorithm, then layout, then repaint, then re-compositing) to redraw the screen. The layout algorithm is quite complex - read the CSS spec to understand some of the rules - and that means it often has to make non-local decisions.
Worse, layout is triggered synchronously by accessing certain properties. Among those are getComputedStyleValue(), getBoundingClientWidth(), .offsetWidth, .offsetHeight, etc, which makes them stupidly easy to run into. Full list is here (possibly a few years out of date):

https://news.ycombinator.com/item?id=9155564

关键字：JavaScript, dom, layout, the

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！