jQuery选择器,效率

Question

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

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

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

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

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

Answer 1

jQuery和灒优化#id选择器^[光源]到document.getElementById(id).我认为他们无法像这样优化它tag#id.

第一个是更快.

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

Answer 2

我们不是猜测,而是衡量它!

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

确保向下滚动到底部.

正如您所料,普通ID比标记合格的更快(减少到getElementByID).使用类时也是如此.

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