具有ID的jQuery选择器的性能

Question

我知道在jQuery中如果我们使用ID选择元素,它是如此高效.我有一个关于这个选择器的问题:

请考虑这3个选择器:

$('#MyElement')

$('#Mytbl #MyElement')

$('#Mytbl .MyClass')

哪一个更快,为什么？我如何检查在jQuery中选择我的元素所用的时间？

Answer 1

直接ID选择器始终是最快的.

我根据你的问题创建了一个简单的测试用例......

http://jsperf.com/selector-test-id-id-id-id-class

选择嵌套ID是错误的,因为如果ID是唯一的(它应该是唯一的),那么它是否嵌套并不重要.

Answer 2

第一个是最快的,因为它只有1个属性可供查找.然而,

document.getElementById("MyElement")

但是更快.它是原生的javascript,与jQuery不同,浏览器会立即知道你想要做什么,而不是必须运行大量的jQuery代码来弄清楚你正在寻找什么.

您可以使用jsPerf运行速度测试,以比较功能:测试用例.结果:

$('#MyElement')
Ops/sec: 967,509
92% slower

$('#Mytbl #MyElement')
Ops/sec: 83,837
99% slower

$('#Mytbl .MyClass')
Ops/sec: 49,413
100% slower

document.getElementById("MyElement")
Ops/sec: 10,857,632
fastest

与预期的一样,本机getter是最快的,其次是jQuery getter,只有1个选择器,低于原生速度的10%.具有2个参数的jQuery getter甚至不接近本机代码的每秒操作,尤其是类选择器,因为与ID相比,类通常应用于多个元素.(本地ID选择器在找到一个元素后停止搜索,我也不确定jQuery是否也这样做.)

Answer 3

这是在某些javascript调用之间停止时间的方法

selectorTimes = [];
var start = new Date().getTime();
$('#MyElement')
selectorTimes.push(new Date().getTime()-start);

start = new Date().getTime()
$('#Mytbl #MyElement')
selectorTimes.push(new Date().getTime()-start);

start = new Date().getTime()
$('#Mytbl .MyClass')
selectorTimes.push(new Date().getTime()-start);

console.log(selectorTimes);

我认为第二个选择器效率不高,如果你有一个domid直接选择它:$('#MyElement')