javascript - querySelectorAll 的动画比 getElementsByClassName 更快？

Question

假设我们想要为 100 个 div 元素设置动画，我们选择所有这些元素并使用 querySelectorAll 和 getElementsByClassName 将它们存储在 nodeList 中。众所周知，后者的准备工作比第一个要快得多，因为第一个从一开始就需要所有 dom 数据。然而，querySelectorAll是静态的，所以我想知道当使用它来操作dom数据时，比方说requestanimationframe要快多少。

有什么想法吗？

Answer 1

如果您不添加和删除匹配的 div(包括更改现有 div 上的类以便它们加入或离开列表)，那么这并不重要；抓取列表一次，然后从该列表中制作动画。

如果您要添加/删除匹配的 div，请使用 getElementsByClassName，因为(再次)您可以一次获取该列表，然后从该列表中进行操作(该列表会持续存在)由浏览器更新)。 (如果您需要支持 IE8，这不是一个选项；IE8 有 querySelectorAll，但没有 getElementsByClassName。但是 IE8 已经过时了，所以...)