您的位置：首页 > Web前端 > JQuery

JQuery - select class 或是select id?

2015-11-24 15:49 651 查看

$("#someid")
$(".someclass")
$("[someattr='value']")

这三种选择那个才是最高效的？

ID查询肯定是最快的，部分原因是因为ID是唯一的，当在DOM中找到ID时API会自动停止继续查询。

如果必须使用class选择器的话，可以通过自定可选的上下文参数来提高效率。

$(".someclass", "#somecontainer")
$("#someid .someclass")
当时不同浏览器的运行效果却是不同的，下面是运行效果：

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>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航