在jQuery中,是通过类或idselect比其他属性select更快?

基本上是

$("#someid") 

要么

 $(".someclass") 

比…快

 $("[someattr='value']") 

我会想象它是(也就是说,由idselect是最快的,然后是类,然后属性),但有没有人知道肯定?

ID绝对是最快的。 部分原因是ID应该是唯一的,所以在DOM中findID之后,API停止search。

如果您必须使用类或属性select器,则可以通过指定可选的上下文参数来提高性能。

例如…

 $(".someclass", "#somecontainer") 

凡某个someclass就像一个div,围绕着一个class类的元素。 在某些somecontainer包含DOM的一小部分的情况下,这可以提供巨大的性能优势。


更新:

几年前,我在上下文参数上做了一些testing。 阅读下面的评论后,我很好奇,如果有什么改变。 事实上,现在的浏览器似乎已经有所改变。 也许这也与jQuery的改进有关? 我不知道。

这是我的结果10,000次迭代(代码如下):

IE9

$(".someclass") – 2793 ms

$(".someclass", "#somecontainer") – 1481毫秒

Chrome 12

$(".someclass") – 75毫秒

$(".someclass", "#somecontainer") – 104毫秒

Firefox 3.6

$(".someclass") – 308 ms

$(".someclass", "#somecontainer") – 357毫秒

所以在这三大现代浏览器中,上下文参数似乎只能帮助IE9。 旧的浏览器也将受益于上下文参数。 但考虑到这些浏览器的普及以及将所有浏览器平均分配,净收益现在已经有所好转了。

这里的代码,如果有人想自己尝试一下…

 <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ startTime = new Date().getTime(); for (i = 0; i < 10000; i++) { s = $(".someclass"); } $("#withoutcontext").html(elapsedMilliseconds(startTime)); startTime = new Date().getTime(); for (i = 0; i < 10000; i++) { s = $(".someclass", "#somecontainer"); } $("#withcontext").html(elapsedMilliseconds(startTime)); }); function elapsedMilliseconds(startTime) { var n = new Date(); var s = n.getTime(); var diff = s - startTime; return diff; } </script> </head> <body> <h1>jQuery Selector Performance: Context vs No Context</h1> <h2>$(".someclass")</h2> <span id="withoutcontext">---</span> ms<br /><br /> <h2>$(".someclass", "#somecontainer")</h2> <span id="withcontext">---</span> ms<br /><br /> <hr /> <p class="a">a</p> <p class="b">b</p> <p class="c">c</p> <p class="a">a</p> <p class="b">b</p> <p class="c">c</p> <p class="a">a</p> <p class="b">b</p> <p class="c">c</p> <p class="a">a</p> <p class="b">b</p> <p class="c">c</p> <p class="a">a</p> <p class="b">b</p> <p class="c">c</p> <div id="somecontainer"> <p class="a">a</p> <p class="b">b</p> <p class="c">c</p> <p class="someclass">someclass</p> </div> <p class="a">a</p> <p class="b">b</p> <p class="c">c</p> <p class="a">a</p> <p class="b">b</p> <p class="c">c</p> <p class="a">a</p> <p class="b">b</p> <p class="c">c</p> <p class="a">a</p> <p class="b">b</p> <p class="c">c</p> <p class="a">a</p> <p class="b">b</p> <p class="c">c</p> </body> </html> 

由IDselect是最快的,因为它直接映射到getElementByID,另外2个必须检查每个元素以确定选定的元素。

如果您必须select使用类或属性,然后尝试将search包含在ID中。 恩。

 $("#someid .someclass") 

ID是唯一的,如果你只想在这里select一个/第一个元素的等价物

$(“#someid”)=> 75,695 ops / sec,最快

$(。unique_class')=> 45,257 ops / sec,慢40%:页面上只有一个类

$(“。someclass”)。first()=> 42,217 ops / sec,慢46%:多个页面,select第一个元素

$(“。someclass:eq(0)”)=> 18,324 ops / sec,慢76%:页面上有多个类,在选定的索引处select元素

testingurl: http : //jsperf.com/jquery-selector-speed-tests/98

ID和类select器,至less在自己使用时,无论是jQuery还是CSS,都会更快。 这主要是因为浏览器已经在DOM / CSS引擎中为ID和类优化了algorithm。

在具有最新版本的jQuery的现代浏览器中,任何被浏览器理解为受支持的CSSselect器的select器string都将由document.querySelectorAll()处理,只要使用标准的CSSselect器就可以提供最高的性能。 非标准select器或较旧的浏览器由jQuery和/或Sizzle库负责,它们尽最大努力利用DOM的get-element(s)方法遍历DOM。

最重要的是要记住,由于不同的DOM实现,性能会因浏览器(版本)到浏览器(版本)而有所不同。 至less,这就是我相信的事情。

id始终是最快的,因为它在页面上是唯一的。 类“可能”比一个属性更快,但这取决于。

这里真正的踢球者是select一个类内的和ID可能不会比select的类更快。 这将取决于页面和浏览器。 在我的testing中,select一个复杂的页面,其中有一个“class”元素,其中class元素的父类有一个id,例如:

 <div id='iamout'> <div class='aonther'> <div class='iamin'>stuff</div> <div class='iamin'>stuff</div> </div> </div> 

$('.iamin','#iamout')这样的select器并不总是像$('.iamin')一样快

并不是所有的浏览器都支持按类名select(原生),但现代/新的浏览器可以提供更好的性能,具体取决于您使用的浏览器。

如果您需要获得最佳性能,则需要testing确切的页面。

Id是最快的,因为它是唯一可以具有该标识符的元素。 许多对象可能具有相同的类名称。 有人可以validation这一点,但似乎这个文件将不需要进一步遍历一旦id被发现。 对于类可能不是这种情况? HTH