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

Question

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

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

Answer 1

这篇博文解释了 static 和 live 之间的一些区别NodeLists，并提到了 live 集合是如何实现的。

在您访问其元素之前，实时集合不会访问 DOM。那时它会创建实际的集合并缓存它。如果 DOM 不更改，则以后的访问不会产生任何开销。

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

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

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