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

Question

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

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

Answer 1

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

在您访问实时集合的元素之前，它不会访问 DOM。此时它会创建实际的集合并缓存它。如果 DOM 不改变，未来的访问就不会产生任何开销。

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

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

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