性能jquery选择与ID

Question

我知道在jQuery的，如果我们使用ID选择元素，它是如此efficient.I有一个关于这个问题的选择：

请考虑此因素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来运行速度测试，比较功能：Test Case。结果：

$('#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 

像预期的那样，吸气剂天然是最快，其次是jQuery的吸气剂仅具有1选择器在天然速度小于10％。具有2个参数的jQuery获取器甚至不会接近每秒本地代码的操作，特别是类选择器，因为与ID相比，类通常应用于多个元素。 （本机ID选择停止搜索，他们已经找到了一个元素之后，我不知道如果jQuery不会了。）

Answer 3

最快的将是：

$('#Mytbl', '#MytblContainer');  

，因为在这种情况下，jQuery的不要”不得不搜索整个dom树来找到'#Mytbl'。它只会在给定的范围内进行搜索。 IE浏览器只会搜索'#MytblContainer'。

Answer 4

你在这里。查看每个示例顶部的评论：

//fastest because it is just one id lookup: document.getElementById("MyElement") with no further processing. 
$('#MyElement') 
//a little slower. JQuery interprets selectors from right to left so it first looks up for #MyElement and then checks if it is hosted in #Mytbl 
$('#Mytbl #MyElement') 
//the slowest of all. JQuery interprets selectors from right to left so it first finds all elements with .MyClass as their class and then searches for those hosted in #Mytbl. 
$('#Mytbl .MyClass') 

如果可以的话，始终只使用ID（如第一个例子），但如果你必须有链接的多个选择和一起上课，尽量把最严格一个在右边。例如一个ID。因为JQuery从右向左解释选择器。

Answer 5

我会说，第一个是最快的，因为你只是在寻找一个ID。

而且

$('#Mytbl .MyClass') 

是最慢的，因为你没有指定具有类“MyClass的”

Answer 6

这是一些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”）

Answer 7

有两件事情：

• 更多选择=较慢的搜索。如果你能用较少的谓词得到你想要的结果，那就这样做。
• 通过ID获取元素比获取类更快。 getElementById是JavaScript的核心功能，因为它经常使用而经过了大量优化。尽可能利用这一点。
• 空间选择器（''）比子选择器（'>'）昂贵得多。如果您可以使用儿童选择器，请这样做。

这些规则适用于CSS，因为他们使用JavaScript和jQuery。

Answer 8

显然，第一个，$("#MyElement")比其他2
访问了ID的元素总是更快速度较快，但有时我们必须找到一些集装箱的一些元素。在这种情况下，我们更喜欢.find()或.filter()（取决于情况）。
选择器之间的区别取决于浏览器到浏览器。例如如果你通过IE访问，它会比FF慢。访问具有类而不是ID的元素时FF更快。

在你的第二个例子中，即$("#mytbl #MyElement")，在这里你找到#MyElement根据#mytbl这是合法但不合适的方式。既然你已经知道元素的ID（假设你的页面上只有一个这个ID的元素），所以最好使用$("#MyElement")。 $("#mytbl #MyElement")将首先读取#mytbl并遍历以找到它下面的#MyElement，因此耗时且速度慢。

要测试不同的情况，您可以编写一个小的代码片段来读取/访问循环中的至少10000个元素，否则很难确定哪种方法更快。

Answer 9

另外，如果您需要嵌套的选择，这是更快地使用$（）。find（）方法。find（）方法

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

$('#Mytbl .MyClass') 
$('#Mytbl').find('.MyClass') 

后者约65％的速度。