基本上是
$("#someid")要么
$(".someclass")比...快
$("[someattr='value']")我会想象它是（即，通过id选择最快，然后是类，然后属性），但有谁知道肯定？
Basically, is
$("#someid")or
$(".someclass")faster than
$("[someattr='value']")I would imagine that it is (that is, selection by id is fastest, then class, then attribute), but does anyone know for sure?
最满意答案
ID绝对是最快的。 部分原因是ID应该是唯一的，所以API在DOM中找到ID后停止搜索。
如果您必须使用类或属性选择器，则可以通过指定可选的上下文参数来提高性能。
例如...
$(".someclass", "#somecontainer")其中somecontainer是一个像div，围绕一个元素与类someclass 。 在somecontainer包含DOM的一小部分的情况下，这可以提供巨大的性能优势。
更新：
几年前，我在上下文参数中做了一些测试。 阅读下面的评论后，如果有任何改变，我很好奇。 事实上，现在的浏览器似乎已经有了一些变化。 也许这也与jQuery的改进有关？ 我不知道。
以下是10,000次迭代的结果（代码如下）：
IE9
$(".someclass") - 2793 ms
$(".someclass", "#somecontainer") - 1481 ms
铬12
$(".someclass") - 75毫秒
$(".someclass", "#somecontainer") - 104 ms
Firefox 3.6
$(".someclass") - 308 ms
$(".someclass", "#somecontainer") - 357 ms
所以在这3大现代浏览器中，上下文参数似乎只能帮助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>ID is absolutely the fastest. Part of the reason is that ID is supposed to be unique, so the API stops searching after the ID is found in the DOM.
If you must use a class or attribute selector, you can improve performance by specifying the optional context parameter.
For example...
$(".someclass", "#somecontainer")Where somecontainer is something like a div, surrounding an element with class someclass. This can offer a huge performance benefit in the cases where somecontainer comprises a small fraction of the DOM.
UPDATE:
I did some tests a couple years ago around the context parameter. After reading the comments below I was curious if anything has changed. Indeed, it seems the scene has changed somewhat with today's browsers. Maybe it also has to do with improvements in jQuery? I don't know.
Here are my results with 10,000 iterations (code is below):
IE9
$(".someclass") - 2793 ms
$(".someclass", "#somecontainer") - 1481 ms
Chrome 12
$(".someclass") - 75 ms
$(".someclass", "#somecontainer") - 104 ms
Firefox 3.6
$(".someclass") - 308 ms
$(".someclass", "#somecontainer") - 357 ms
So among these big 3 modern browsers, the context parameter only seems to help IE9. Older browsers will also benefit from the context parameter. But considering the prevalence of each of these browsers and averaging everything out, the net gain is somewhat of a wash now.
And here's the code in case anyone wants to try it themselves...
<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>更多推荐
发布评论