javascript - jQuery 选择器，效率

Question

我最近一直在阅读有关不同选择器引擎效率的更多信息。我知道 jQuery 使用 Sizzle 引擎，这篇关于 jQuery 内容的博客文章提到 Sizzle 引擎会将您的选择器分解为一个数组，然后从左到右解析。

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

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

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

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

score 15 · Accepted Answer

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

第一个更快。

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

score 8 · Accepted Answer

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

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

确保您向下滚动到底部。

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

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

score 4 · Accepted Answer

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

您可以从这里的源代码中看到：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。

6 回答 6