jQuery 选择器的性能

Question

这个选择器是：

$("div#myId")

比这个选择器更快：

$("#myId")

？两者都很好用，但我想提高性能。

Answer 1

根据jsperf的速度，$("#myId")比.$("div#myId")

使用 id 值时，添加到选择器的任何其他内容都不会提高性能。浏览器已经有所有 id 值的索引，因为文档中的所有 id 都应该是唯一的。向选择器添加其他内容只会增加它必须测试的内容。例如，在 中，可以使用#myId短路，但在中，jQuery 或其调用的函数必须首先将选择器解析为各个部分，找到具有正确 ID 的对象，然后检查它是否也是一个document.getElementById("myId")div#myIddiv。

如果您确实想绝对确定地知道任意两种场景之间的性能差异，那么您必须编写性能测试（在http://jsperf.com等工具中并在所有相关浏览器中进行测试。

一般来说，您应该遵循使用最简单的代码以适当的性能完成工作的公理。除非您真的$("#myId")试图优化纯粹的性能，否则您可能会使用document.getElementById("myId").

而且，笑一笑，jQuery 根本不快（它创建一个对象，运行一个构造函数，分析选择器，评估选择器，查看其他可以传递的选项，等等...），所以如果你真的关心的话关于优化最大化性能，您首先不会使用 jQuery。也就是说，jQuery 极大地加快了编写代码的时间，因此在许多情况下这是值得的。

请参阅 jsperf： http: //jsperf.com/jqvsother以进行性能比较。

在 Chrome 中，三者之间有很大的区别：

$("div#myId")                    -    446,589 ops/sec
$("#myId")                       -  1,705,994 ops/sec
document.getElementById("myId")  - 32,278,617 ops/sec

因此，$("#myId")比 快约 4 倍$("div#myId")，document.getElementById("myId")比 快 19 倍$("#myId")。这比我预期的差异更大。

这是一个图形表示（较长的条形速度更快）：

当你测量而不是猜测时，你总是能学到一些东西。

深入研究 jQuery 选择器处理代码，您会看到以下内容：

1. 检查是否有任何选择器被通过。
2. 检查它是否是一个字符串以及它是否看起来像 HTML"<.....>"
3. 如果看起来不像简单的 HTML，请/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/在其上运行此正则表达式
4. 如果正则表达式显示选择器是 just "#xxxx"，则调用document.getElementById().
5. 如果它看起来像更复杂的 HTML（可能带有属性），则将该 HTML 处理为 DOM 对象
6. 如果没有任何这些特殊字符串，则运行.find()以查找选择器匹配项。运行.find()将选择器从 Sizzle 引擎中传递出去以进行评估（从头开始）。
7. 然后，Sizzle 引擎在选择器上运行另一个正则表达式，再次寻找可以选择更快方法的快捷方式。
8. 最终，如果没有任何快捷方式通过并且选择器中没有特殊项目，则调用querySelectorAll().
9. 依此类推，处理其他可能要传递的非字符串事物（DOM 对象、jQuery 对象等...）

所以，我从中吸取了一些东西。首先，有一个简单的“#xxxx”字符串的快捷方式，可以避免大量其他处理。毫不奇怪为什么这样更快。其次，任何避免深入到最终调用的 Sizzle 选择器评估代码深处的捷径querySelectorAll()都会加快速度。