Jay*_*Jay 43 javascript jquery jquery-selectors
基本上是
$("#someid")
要么
$(".someclass")
比...快
$("[someattr='value']")
我会想象它是(也就是说,通过id选择是最快的,然后是类,然后是属性),但是有人知道吗？
Ste*_*ham 71
ID绝对是最快的.部分原因是ID应该是唯一的,因此API在DOM中找到ID后停止搜索.
如果必须使用类或属性选择器,则可以通过指定可选的上下文参数来提高性能.
例如...
$(".someclass", "#somecontainer")
哪里somecontainer是像一个div,周围有类的元素someclass.在somecontainer包含一小部分DOM 的情况下,这可以提供巨大的性能优势.
更新:
几年前我围绕上下文参数做了一些测试.阅读下面的评论后,我很好奇是否有任何改变.事实上,现在的浏览器似乎已经有所改变.也许它也与jQuery的改进有关？我不知道.
以下是10,000次迭代的结果(代码如下):
IE9
$(".someclass") - 2793毫秒
$(".someclass", "#somecontainer") - 1481毫秒
Chrome 12
$(".someclass") - 75毫秒
$(".someclass", "#somecontainer") - 104毫秒
Firefox 3.6
$(".someclass") - 308毫秒
$(".someclass", "#somecontainer") - 357毫秒
所以在这三大现代浏览器中,context参数似乎只对IE9有所帮助.较旧的浏览器也将受益于context参数.但考虑到这些浏览器的普及并将所有内容平均化,现在净收益有点大.
这是代码,以防任何人想要自己尝试...
<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>
a p*_*mer 11
按ID选择是最快的,因为它直接映射到getElementByID,另外2个必须检查每个元素以确定所选元素.
如果必须使用类或属性进行选择,请尝试将搜索括在ID中.恩.
$("#someid .someclass")
ID和类选择器,至少在它们自己使用时,往往更快,无论是jQuery还是CSS.这主要是因为浏览器在其DOM/CSS引擎中具有针对ID和类的优化算法.
在具有最新版本jQuery的现代浏览器中,任何被浏览器理解为支持的CSS选择器的选择器字符串都将被处理document.querySelectorAll(),只要使用标准CSS选择器,就可以提供最高性能.非标准选择器或旧浏览器由jQuery和/或Sizzle库负责,它们尽最大努力利用DOM的get-element(s)方法来遍历DOM.
要记住的最重要的事情是,由于DOM实现的不同,性能会因浏览器(版本)和浏览器(版本)而异.至少,这就是我相信事物的方式.
ID是唯一的,如果您只想在此处选择一个/第一个元素,则等效
$("#someid")=> 75,695 ops/sec,最快
$(.unique_class')=> 45,257 ops/sec,慢40%:页面上只有一个类
$(".someclass").first()=> 42,217 ops/sec,慢46%:页面上有多个类,选择第一个元素
$(".someclass:eq(0)")=> 18,324 ops/sec,慢76%:页面上有多个类,在所选索引处选择元素
测试网址:http://jsperf.com/jquery-selector-speed-tests/98
| 归档时间： |
|
| 查看次数： |
35248 次 |
| 最近记录： |