jQuery 选择器，效率答案

【问题标题】：jQuery Selectors, efficiencyjQuery 选择器，效率
【发布时间】：2011-11-07 21:26:39
【问题描述】：

我最近阅读了有关不同选择器引擎效率的更多信息。我知道 jQuery 使用 Sizzle 引擎，this blog post 关于一些 jQuery 的东西提到 Sizzle 引擎会将你的选择器分解成一个数组，然后从左到右解析。

然后，它从右到左开始使用正则表达式破译每个项目。这也意味着选择器的最右边部分应该尽可能具体——例如，一个 id 或标签名称。

我的问题是使用仅指定的 ID 或标签名称运行选择器是否更有效：

var div = $('#someId');
//OR
var div = $('div#someId');

由于我在 div#someId 表单中编写 CSS，我倾向于以相同的方式执行我的选择器，我是否会导致 Sizzle 执行额外的工作（假设 QuerySelectorAll 不可用）？

【问题讨论】：

【解决方案1】：

你可以从这里的源代码中看到：http://code.jquery.com/jquery-1.6.2.js函数中的init。

最快的选择器是$('')，它会立即返回一个空的jQuery对象。

$('body') 是下一个，jQuery 将其转换为 document.body

接下来是$('#id')，它使用document.getElementById('id')。

任何其他选择器，例如 $('div#id') 都将成为对 $(document).find('div#id') 的调用。 find() 与其他任何解决方案相比都非常复杂，并且使用 Sizzle JS 来选择 div。

【讨论】：

【解决方案2】：

与其推测，不如衡量一下！

这是一个加载此页面的测试用例，然后用这两种方法匹配一个随机元素。

确保您向下滚动到底部。

正如您所料，普通 id 比标签限定的更快（减少到 getElementByID）。使用类时也是如此。

按 ID 选择比按类选择要快得多，主要是因为 ID 保证是唯一的。

【讨论】：

【解决方案3】：

var div = $('#someId'); //should be faster

jQuery 将使用getElementById() 作为上述选择器

var div = $('div#someId'); //would probably preform slower due to finding all the divs first

jQuery 将使用getElementsByTagName()，然后遍历上述选择器的元素数组

您还应该记住，标签名称绝对应该与类选择器一起使用（尽可能）

var div = $('div.myclass') //faster than the statement below

对

var div = $('.myclass') //slower

【讨论】：

【解决方案4】：

jQuery 和 Sizzle 将 #id 选择器 ^[source] 优化为 document.getElementById(id)。我认为他们无法使用tag#id 来优化它。

第一个更快。

顺便说一句，为 #id 选择器指定标签名称是过度指定的，因为文档上只能有一个具有给定 id 的标签。过度指定会更慢even in CSS。

【讨论】：

【解决方案5】：

JsPerf：http://jsperf.com/jquery-id-vs-tagname-id

第一个会更快，因为它只需要检查 id。第二个运行相同的检查并且必须确保标记名是正确的。 div#id 不会给你 ID 为 id 的元素，除非它是 div

【讨论】：

【解决方案6】：

如果你使用 jQuery，你可以假设浏览器带有getElementById。 $('#someId') 可以转换为document.getElementById('someId')。 $('div#someId') 不会，所以丢失标签名会更快。

【讨论】：

太棒了，这里的速度差异是惊人的。我将不得不评估我如何做我的选择器。我的印象是将$('div#someID') 转换为getElementById('someID') 足够聪明，但我在选择器中添加另一个约束是有道理的，它必须是div。谢谢你。