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

Question

我的前端JS代码的一部分依赖于数千个DOM节点的实时HTMLCollection。因为它是实时的，所以它会随着DOM的更新而自动更新。

这是否等同于我每次修改DOM时都重新运行document.getElementsByClassName调用，或者在幕后进行了性能优化？

Answer 1

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

直到您访问DOM的元素时，活动集合才会访问DOM。此时，它会创建实际的集合并缓存它。如果DOM没有改变，那么将来的访问就不会有任何开销。

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

因此，如果您创建了一个实时集合，并且与DOM修改相比不经常访问它，那么应该会有相对较少的开销。最糟糕的情况是，如果循环遍历实时集合并在循环期间修改DOM --每次迭代都必须更新集合。

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