使用 JS querySelector 的性能 [关闭]答案

【问题标题】：Performance using JS querySelector [closed]使用 JS querySelector 的性能 [关闭]
【发布时间】：2013-02-09 09:07:03
【问题描述】：

在 Web 浏览器中使用 JavaScript 时，以下各项之间是否存在性能差异：

现有的 getElementById

document.getElementById("elem");

使用 #id 的查询选择器

document.querySelector("#elem");

使用 [id=elem] 的查询选择器

document.querySelector("[id=elem]");

我假设第一个最快（只需查找带有 ID 的元素）。最后一个看起来也是不好的做法。我喜欢第二个，因为对所有内容都使用 querySelector 使代码易于阅读。

有什么建议吗？

【问题讨论】：

Test it
Here's 特定测试的快速链接
有很多东西可以影响这一点，你的 DOM 有多大？他们在 DOM 中要遍历多少个子-父-子节点？将问题中的代码与 DOM 中的单个元素一起使用没有区别。即使是链接测试也接近于无意义。问题是，你什么时候使用哪一个？显然在寻找课程时不能使用getElementById，但可以使用document.querySelector(".myclass")
@FrançoisWahl：我认为 OP 专门询问了 id。显然你会使用getElementsByClassName 来上课。
为什么这个问题被关闭为“不具建设性”？我作为开发人员来到这里是为了找出其中哪个更快！

【解决方案1】：

首先，

document.querySelector("#elem");

有一个优势，与 document.getElementId 不同，它可以返回类。但是，由于它只返回具有该类名的第一个对象，因此它的实用性大大降低，因此如果您不是专门寻找具有该类名的第一个对象，则最好使用 id。如果你使用，

document.querySelectorAll

但是，我相信（我可能错了），它将所有具有该类名的项目作为数组返回，其中常规 querySelector 等效于 querySelectorAll[0]。另一个优点是，您可以通过它运行 css3 查询，这非常有用。

其次，

document.getElementById("elem");

比 queryselector 有一个非常好的优势，因为它几乎快 5 倍，所以如果你坐在那里有几千行代码并且你想优化所述代码，那么getElementById 是要走的路。

最后，

document.querySelector("[id=elem]");

我个人认为在任何情况下都不需要使用它。如果你需要一个 querySelector，为什么不直接使用 # 呢？这与您的第一个 querySelector 示例完全相同，但是它有很多无用的字符。

编辑：为了清楚起见，总而言之，您最好使用 document.getElementById。

【讨论】：

“它可以返回类”是什么意思？
我的意思是，它可以返回类：document.querySelector(".myclass");
啊，你的意思是“它可以返回一个由类属性选择的元素”。当然，getElementsByClassName 也可以做到这一点。
然而，它比 getElementsByClassName 有一个优势，因为它也可以返回 id，就像 document.getElementById 一样。
[id=elem] 和 querySelectorAll 如果多个元素具有相同的 id 会很有用。他们当然不应该这样做，但它确实会返回这种情况下的所有项目，而 #elem 不会。

【解决方案2】：

有什么性能差异

可能，因为它们是不同的功能。 querySelector 至少需要在检测到它等于getElementById 之前解析选择器。而且我怀疑这种优化是否发生在属性选择器上，没有人使用它。所以我同意你的假设；和tests confirm them（感谢@Silver_Clash）。

我个人不喜欢第二个，因为它与动态 id 值一起使用更加模糊和糟糕。显式使用getElementById 更加简洁。

【讨论】：

【解决方案3】：

You can test it yourself。 getElementById 是最快的方法

【讨论】：