dom与js操作的性能优化

最新推荐文章于 2025-03-10 13:49:31 发布

转载最新推荐文章于 2025-03-10 13:49:31 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/antidote/p/4686693.html

文章标签：

#javascript #ViewUI

本文解释了频繁DOM操作导致性能下降的原因。将DOM比作岛屿，JavaScript比作另一个岛屿，两者的交互就像过桥一样需要支付费用。因此，多次访问或修改DOM会增加计算成本并导致页面重绘。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

频繁地对于DOM进行操作的很是损耗性能，为什么访问DOM对性能有影响？那是因为两个独立的部分通过他们各自的接口来连接就会带来性能损耗。打个比喻，把DOM看成一个岛屿，把Javascript看成另外一个岛屿，两者之间以一座要收费的桥连接，每次Javascript访问DOM都需要过桥，交一次桥费。来回多了费用自然就高了。所以我们得想方设法减少过桥的次数。
访问DOM元素的代价就是交一次“桥费”，修改DOM元素则会导致浏览器重新计算页面的几何变化。如果是循环修改DOM元素，其代价可想而知。

转载于:https://www.cnblogs.com/antidote/p/4686693.html