维护实时HTMLCollection的性能成本是多少？

Question

我的一部分前端JS代码取决于数千个DOM节点的实时HTMLCollection。由于它是实时的，因此会在DOM更新时自动更新。

这是否与每次修改DOM时重新运行document.getElementsByClassName调用相同，还是在底层进行了性能优化？

Answer 1

This blog post解释了静态和实时NodeLists之间的一些区别，并提到了实时集合的实现方式。

活动集合只有在访问其元素之前才访问DOM。那时，它创建实际的集合并对其进行缓存。如果DOM不变，则以后的访问没有任何开销。

更改DOM不应导致立即更新任何集合。相反，它应该只是使它们的缓存无效。下次访问其中一个馆藏时，它将重新生成。

因此，与DOM修改相比，如果您创建一个实时集合并很少访问它，那么开销应该相对较小。最糟糕的情况是，如果您循环遍历一个实时集合并在循环过程中修改DOM，则每次迭代都必须更新该集合。

可能还有其他优化措施可以缓解这种情况。对于某些类型的实时集合，JavaScript引擎可能能够判断特定的DOM修改是否会影响它；如果不是，则不必使集合无效。例如，使用document.getElementsByClassName()创建的集合不会受到不会在任何地方添加或删除指定类的修改的影响。但是，如果执行删除元素之类的操作，则必须检查该类是否在该元素所指向的子树中的任何位置出现，因此，这显然比仅使缓存无效更好。