jQuery常用选择器性能测试

一直想知道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>

测试结果如下图:

jQuery选择器性能测试对比

从上图可以看出,如果页面中只有一个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>

测试结果图:

jQuery选择器性能测试对比

从上图可以看出,如果有多个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节点的测试结果图:

jQuery选择器性能测试对比

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

jQuery选择器性能测试对比

这个差距不大,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"); });
		}
	}

测试结果图:

jQuery选择器性能测试对比

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

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

原载于:雨夜带刀"s Blog
本文链接:http://stylechen.com/jquery-selector-test.html
如需转载请以链接形式注明原载或原文地址并转告本博。

“jQuery常用选择器性能测试”目前已有 10 条评论

  • *
  • *

评论列表

  • redky说道:

    这样测试也太片面了.
    可以在html里面多放点dom试试

  • 雨夜带刀说道:

    @redky 你说得办法我也试过,和写多个for循环的结果差不多,因为不好把Demo贴上来,所以就用这种办法了。

  • redky说道:

    那我测试的结果和你的相反.

  • 雨夜带刀说道:

    @redky 我回头又重新就进行了测试,结果和原来的大不相同,原来的测试的确过于片面,谢谢你的提醒。

  • shell说道:

    我觉得javascript的性能瓶颈不在这里,在于快速循环移动dom元素时很高的cpu占用率。即使是一个简单的动画。
    Opera在双核下要吃掉45%,chrome 20%左右。
    IE直接计算发热。。。

  • 雨夜带刀说道:

    @shell
    现在的选择器基本就是看性能,不谨慎使用选择器当然会有性能上的问题,至于你说的动画会占这么高的CPU,我还没碰到过,要么你可以试试我写的easyAnim,绝对不会这么占资源。

  • shell说道:

    @雨夜带刀
    也不算是简单的动画,你看下面的代码(代码太长不让我提交,我放在了网站上)
    除了Chrome,其它浏览跑起来都很吃力
    我觉得问题在于频繁地去改变DOM元素的STYLE。
    如果我在循环体里面不用jquery去操作,而是直接element.style.xx的话,应该情况会好一些。
    http://source.deepst.com/test/test-js-move-dom-speed.html

  • 雨夜带刀说道:

    @shell
    这种动画对于浏览器来说是有点压力,尤其是代码本身的性能也不怎么样的时候。但是并不是说JS做起动画来就不行,Google的一些LOGO证明了这一点,用HTML5写的。
    另推荐你看另一篇文章:jQuery最佳实践,文章挺不错的,或许对你有些帮助。

  • shell说道:

    @雨夜带刀
    嗯。谢谢你的推荐。看了这篇文章,我再次感觉到我写的不是javascript代码,而是jQuery代码。
    在循环里面还是要用原生方法。但jQuery确实太方便语法太优雅了。