具有ID的jQuery选择器的性能
我知道在jQuery中如果我们使用ID来选择元素，那就非常有效。我对这个选择器有一个疑问：
请考虑这3个选择器：
$('#MyElement') $('#Mytbl #MyElement') $('#Mytbl .MyClass')
哪一个更快，为什么？我如何检查在jQuery中选择我的元素所用的时间？
直接ID选择器始终是最快的。
我根据你的问题创建了一个简单的测试用例……
http://jsperf.com/selector-test-id-id-id-id-class
选择嵌套ID是错误的，因为如果ID是唯一的（它应该是唯一的），那么它是否嵌套并不重要。
这是在某些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’）
第一个是最快的，因为它只有1个属性可供查找。 然而，
document.getElementById("MyElement")
但是更快。 它是原生的javascript，与jQuery不同，浏览器会立即知道你想要做什么，而不是必须运行大量的jQuery代码来弄清楚你正在寻找什么。
您可以使用jsPerf运行速度测试，以比较function： 测试用例 。 结果：
$('#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是否也这样做。）
这个给你。 请参阅每个示例顶部的注释：
//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从右到左解释选择器。
几件事：
- 更多选择器=慢搜索。 如果您可以使用较少的谓词获得所需的结果，请执行此操作。
- 通过ID获取元素比通过类获取元素更快。 getElementById是JavaScript的核心function，经过大量优化，因为它经常使用。 尽可能利用这一点。
- 空格选择器（”）比子选择器（’>’）昂贵得多。 如果您可以使用子选择器，请执行此操作。
这些规则适用于CSS，因为它们执行JavaScript和jQuery。
此外，如果您需要嵌套选择器，使用$（）。find（）。find（）会更快
http://jsperf.com/selector-test-id-id-id-id-class/2
$('#Mytbl .MyClass') $('#Mytbl').find('.MyClass')
后者的速度提高了约65％。
显然第一个， $("#MyElement")比其他2快。
访问具有其id的元素总是更快但有时我们必须在某个容器中找到一些元素。 在这种情况下，我们更喜欢.find()或.filter() （取决于具体情况）。
选择器之间的区别取决于浏览器到浏览器。 例如，如果你通过IE上的类访问它将比FF慢。 访问具有类而不是ID的元素时，FF更快。
在你的第二个例子中，即$("#mytbl #MyElement") ，在这里你找到了#MyElement下的#mytbl ，这是合法但不合适的方式。 由于您已经知道元素的ID（假设您的页面上只有一个带有此id的元素），因此最好使用$("#MyElement") 。 $("#mytbl #MyElement")将首先读取#mytbl并遍历以查找其下的#MyElement，因此耗时且缓慢。
要测试不同的情况，您可以编写小片段来循环读取/访问至少10000个元素，否则很难确定哪个方法更快。
最快的将是：
$('#Mytbl', '#MytblContainer' );
因为在这种情况下，jquery不必搜索整个dom树来查找’#Mytbl’。 它将仅在给定的范围内进行搜索。 IE它只会搜索’#MytblContainer’。
我会说第一个是最快的，因为你只是在搜索一个id。
和
$('#Mytbl .MyClass')
是最慢的，因为你没有指定具有类“MyClass”的元素的类型