jQuery选择器，效率

我最近一直在阅读关于不同选择器引擎的效率。我知道jQuery使用Sizzle引擎和这个博客文章关于一些jQuery的东西提到Sizzle引擎将你的选择器拆分成一个数组然后从左到右解析。

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

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

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

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

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

第一个是更快。

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

我们不是猜测，而是衡量它！

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

确保向下滚动到底部。

正如您所料，普通id比标记合格者快（减少到getElementByID）。使用类时也是如此。

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

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

jsPerfcertificate了这一点。差异是巨大的。

 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

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

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

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

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

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

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

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