雨夜带刀

一直想知道jQuery的选择器到底哪个性能更好,却一直苦于没有顺手的测试工具。直到前不久同事老马开发了一款测试JavaScript性能的给力小插件FireJSPT，这个插件是基于Firebug的，可以灵活的对页面中的JS代码片断进行测试，使用的时候只要将FireJSPT的类库文件导入即可：

<script type="text/javascript" src="firejspt.js"></script>

使用FireJSPT，本博对jQuery的常用的选择器在Firefox下做了一个测试，测试环境如下：

• 操作系统：Windows 7旗舰版本
• 浏览器：Firefox 3.6.13
• 插件：Firebug 1.60(未安装其他插件)
• jQuery版本：1.44

层级选择器(ul li)和find的对比

HTML结构如下：

<ul class="list">
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <!--省略455个li标签-->
    <li><a href="#">jQuery常用选择器性能测试</a></li>
</ul>

首先要感谢redky同志的提醒，原来我的测试过于片面导致测试结果很受质疑，我现在尽量模拟真实的环境来重新进行测试。上面的HTML代码复制了500个li标签，分别写了两个函数testFun1和testFun2，并分别绑定一个点击事件，JavaScript代码如下：

/*引入1.44版的jQuery的库文件*/
<script type="text/javascript" src="jquery.js"></script>
/*引入FireJSPT的库文件*/
<script type="text/javascript" src="firejspt.js"></script>
<script type="text/javascript">
function testFun1(){
$(".list a").click(function() { alert("Hello World"); });
}

function testFun2(){
$(".list").find("a").click(function() { alert("Hello World"); });
}

/*分别调用2个函数进行测试*/
$(function(){
jspt.test(function(){ testFun1(); });
jspt.test(function(){ testFun2(); });
});
</script>

测试结果如下图：

从上图可以看出，如果页面中只有一个ul.list的DOM节点，find的速度比层级选择器的要快。再把上面的整个ul.list>li的结构复制2次，复制后的结构如下：

<ul class="list">
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <!--省略455个li标签-->
    <li><a href="#">jQuery常用选择器性能测试</a></li>
</ul>
<ul class="list">
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <!--省略455个li标签-->
    <li><a href="#">jQuery常用选择器性能测试</a></li>
</ul>
<ul class="list">
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <li><a href="#">jQuery常用选择器性能测试</a></li>
    <!--省略455个li标签-->
    <li><a href="#">jQuery常用选择器性能测试</a></li>
</ul>

测试结果图：

从上图可以看出，如果有多个ul.list这样的DOM节点，层级选择器的速度又比find快。那么大致可以得出一个这样的结论，如果页面中的DOM节点是唯一的，那么使用find来查找它的子节点速度比层级选择器要快，如果页面中有多个类名相同的节点，那么使用find来查找它的子节点速度比层级选择器要慢。

层级选择器(ul > li)和children的对比

用上面同样的方法来进行测试，改动后的JavaScript代码如下：

function testFun1(){
$(".list > li").click(function() { alert("Hello World"); });
}

function testFun2(){
$(".list").children("li").click(function() { alert("Hello World"); australian casino sites });
}

只有一个ul.list的DOM节点的测试结果图：

三个ul.list的DOM节点测试结果图：

这个差距不大，children稍胜一筹，这个结果与原来用for循环的测试方法完全相反。

id和class选择器的对比

HTML结构如下：

<div id="test">jQuery常用选择器性能测试</div>
<div class="test">jQuery常用选择器性能测试</div>

改动后的JavaScript代码如下：

	function testFun1(){ 
		for(var i = 0;i < 1000;i ){
			$("#test").click(function() { alert("Hello World"); });
		}
	}
 
	function testFun2(){ 
		for(var i = 0;i < 1000;i ){
			$(".test").click(function() { alert("Hello World"); });
		}
	}

测试结果图：

了解JavaScript的都知道id选择器肯定比class选择器快，至于快多少这下应该有个比较靠谱的答案了。

再次感谢redky同志的提醒，测试这种选择器的时候还得尽量模拟真实的环境，测试出来的数据才更靠谱。