javascript 使用 JS querySelector 的性能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15046356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Performance using JS querySelector
提问by Rob Farr
When using JavaScript in the web browser is there any performance difference between the following:
在 Web 浏览器中使用 JavaScript 时，以下各项之间是否存在性能差异：
Existing getElementById
现有的 getElementById
document.getElementById("elem");
Query Selector using #id
使用 #id 的查询选择器
document.querySelector("#elem");
Query Selector using [id=elem]
使用 [id=elem] 的查询选择器
document.querySelector("[id=elem]");
I'm assuming the first one will be fastest (only has to lookup elements with an ID). Also the final one looks like bad practice. I like the second one as using querySelector for everything makes the code easy to read.
我假设第一个将是最快的（只需要查找带有 ID 的元素）。最后一个看起来也是不好的做法。我喜欢第二个，因为对所有内容都使用 querySelector 使代码易于阅读。
Any suggestions?
有什么建议？
采纳答案by Bernie
Firstly,
第一，
document.querySelector("#elem");
Has an advantage in the fact that, unlike document.getElementId, it can return classes. However, the usefulness of this is far diminished by the fact that it only returns the first object with that class name, so you might as well just use an id if you're not specifically looking for the first object with that classname. if you use,
与 document.getElementId 不同的是，它的优势在于它可以返回类。但是，由于它只返回具有该类名的第一个对象，所以它的用处大大减少，因此如果您不是专门寻找具有该类名的第一个对象，则最好只使用 id。如果你使用，
document.querySelectorAll
However, I believe (I may be wrong), it returns all items with that classname as an array, where regular querySelector is equivalent to querySelectorAll[0]. One more advantage, is that you can run css3 queries through it, which can be quite useful.
但是，我相信（我可能错了），它将具有该类名的所有项目作为数组返回，其中常规 querySelector 等效于 querySelectorAll[0]。另一个优点是您可以通过它运行 css3 查询，这非常有用。
Secondly,
其次，
document.getElementById("elem");
Has a very good advantage over queryselector in the sense that it is almost 5 times faster, so if you're sitting there with several thousand lines of code and you want to optimise said code, then getElementById is the way to go.
与 queryselector 相比，它有一个非常好的优势，它几乎快了5 倍，所以如果你坐在那里有几千行代码并且你想优化所述代码，那么 getElementById 是要走的路。
Lastly,
最后，
document.querySelector("[id=elem]");
I, personally, don't see the need to use this in any situation. If you needed a querySelector, why not just use a # ? This is exactly equivalent to your first example of querySelector, however it has a lot of useless charaters.
我个人认为没有必要在任何情况下使用它。如果您需要一个 querySelector，为什么不直接使用 # ？这完全等同于您的第一个 querySelector 示例，但是它有很多无用的字符。
Edit: Just to be clear, in summary, you're probably better off using document.getElementById.
编辑：为了清楚起见，总而言之，您最好使用 document.getElementById。
回答by Bergi
is there any performance difference
是否有任何性能差异
Probably, since they are different functions. querySelectorat least needs to parse the selector before detecting that it's equal to getElementById. And I doubt this optimisation takes place for the attribute selector at all, no one uses it. So I share your assumptions; and tests confirm them(thanks to @Silver_Clash).
可能，因为它们是不同的功能。querySelector至少需要在检测到它等于之前解析选择器getElementById。而且我怀疑这种优化是否发生在属性选择器上，没有人使用它。所以我同意你的假设；和测试证实了它们（感谢@Silver_Clash）。
Personally I do not like the second one, as it is more ambiguous and awful to use with dynamic id values. Explicitly using getElementByIdis just more concise.
我个人不喜欢第二个，因为与动态 id 值一起使用更加模糊和可怕。显式使用getElementById更简洁。
回答by Silver_Clash
You can test it yourself. getElementById is a fastest method
你可以自己测试一下。getElementById 是最快的方法
