jQuery选择器的性能测试

在 https://github.com/doomhz/jQuery-Tweaks 上面看到jQuery性能测试工具：

/**
* Doom Tweaks for Javascript Projects
*
* @author Dumitru Glavan
* @version 1.1 (16-JUL-2011)
* @requires jQuery
* @link http://dumitruglavan.com
*
* @example: $.l(4,5,6);
* @example: $.time();
* @example: $.lt();$('div')$.lt();
* @example: $.bm('$('div')'); - benchmark your code
* @example: $.mockAjax({mockUrl: '/ajax_mocks'}); - mock your ajax calls
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*
*/
(function ($) {

    /**
	 * Extend Firebug
	 */
	if (typeof(console) === 'object') {
		/**
		 * Shortcut function for console.log()
		 */
		$.extend($, {
            l: function () {
                for (var i = 0; i < arguments.length; i++) {
                    console.log(arguments[i]);
                }
            }
        });
	}

	/**
	 * Shortcut function for getting timestamp in second (PHP like function time())
	 * @param numeric divideBy - You can switch back to milliseconds by specifying this as 1
	 */
	$.extend($, {
        time: function (divideBy) {
			return ~~(+ (new Date().getTime() / (typeof divideBy === 'undefined' ? 1000 : divideBy)));
		}
    });

	/**
	 * Shortcut function for logging time to the Firebug console
	 * call $.lt() then your code then $.lt() again to get the results
	 */
	$.extend($, {
        lt: function () {
            if (this.ltLastTime == null) {
                return this.ltLastTime = new Date().getTime();
            }
            var diff = new Date().getTime() - this.ltLastTime;
            this.ltLastTime = null;
            $.l(diff);
            return diff;
        },
        ltLastTime: null
	});

	/**
	 * Shortcut function for benchmarking a block of code to the Firebug console
	 * this function will run your code in a for block to create overflow and push the results into Firebug
	 *
	 * @param string benchmarkCode - the block of code you want to benchmark
	 * @param numeric testTime - the number of FOR cicles
	 */
	$.extend($, {
        bm: function (benchmarkCode, testTime) {
            this.testTime = typeof testTime === 'number' ? testTime : 9999;
            $.lt();
            for (var i = 0;i < this.testTime;i++) {
                eval(benchmarkCode);
            }
            $.lt();
        }
	});
        
    /**
     * Mock ajax requests with a prefilter
     *
     */
    $.extend($, {
        mockAjax: function (mockOptions) {
            mockOptions = $.extend({
                mockUrl: '/ajax_mocks'
            }, mockOptions);
            $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
                if (!options.noMock) {
                    options.url = mockOptions.mockUrl + '?ajax_url=' + encodeURIComponent(options.url);
                }
            });
        }
	});
	
})(jQuery);

调试了几组方法:

$("id");

$("class");

$("id class");

$("class","id");

$("id").find("class");

发现并没有太大的差别；然后查看了一下代码，原来是因为工具函数里面用了eval()方法。

eval()到底有多耗性能？下面做个简单的测试（调用9998次后所需的时间（ms））：

通过几次测试之后，eval()这个方法的所耗时间竟然是$("id")的18--19倍。

这也是为什么eval()方法需要谨慎使用的原因。

如果直接用上面的工具函数来测试jQury方法的性能，实在有点不够直观，

所以可以改用下面的方法来测试：

$.lt();
for(i=1; i<9999; i++){
	$('#test1');	
}
$.lt();

当然在使用上没有封装好的方法那么方便，但因为不需要调用eval()方法，所以测出的数值更为直观。

下面再做几个测试,js部分代码如下：

$(document).ready(function () {
	$.extend($, {
		lt: function () {
			if (this.ltLastTime == null) {
				return this.ltLastTime = new Date().getTime();
			}
			var diff = new Date().getTime() - this.ltLastTime;
			this.ltLastTime = null;
			return diff;
		},
		ltLastTime: null
	});
			
	$.lt();
	for(i=1; i<99999; i++){
		document.getElementById("test");
	}
	console.log("getElementById('test'):", $.lt());		
	//$("id");
	$.lt();
	for(i=1; i<99999; i++){
		$('#test');	
	}
	console.log("$('#test'):", $.lt());
	//$("class");
	$.lt();
	for(i=1; i<99999; i++){
		$(".testdiv");	
	}
	console.log("$('.testdiv'):", $.lt());
	//$("id class");
	$.lt();
	for(i=1; i<99999; i++){
		$("#test .testdiv");	
	}
	console.log("$('#test .testdiv'):", $.lt());
	//$("class","id");
	$.lt();
	for(i=1; i<99999; i++){
		$(".testdiv", "#test");	
	}
	console.log("$('.testdiv', '#test'):", $.lt());
	//$("id").find("class");
	$.lt();
	for(i=1; i<99999; i++){
		$("#test").find(".testdiv");	
	}
	console.log("$('#test').find('.testdiv'):", $.lt());
});

html的代码如下：

<div></div><div></div><div></div>   
<div></div><div></div><div></div>   
<div></div><div></div><div></div>   
<div></div><div></div><div></div>          
<div></div><div></div><div></div>     
<div id="test">
    <div class="testdiv"></div>
    <div></div><div></div><div></div>
    <div></div><div></div><div></div>   
    <div></div><div></div><div></div>   
    <div></div><div></div><div></div>   
    <div></div><div></div><div></div>   
    <div></div><div></div><div></div>   
    <div></div><div></div><div></div>   
    <div class="testdiv"></div>
    <div class="testdiv"></div>
    <div class="testdiv"></div>
</div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div class="testdiv"></div>
<div class="testdiv"></div>
<div class="testdiv"></div>

Chrome的测试结果：

FireFox的测试结果：

可以看到，jQuery的选择器在性能和js还是有不少的差距。

而jQuery以#id选择器的速度比.class的速度要快很多，

如果针对特定的class进行选择时，

$("id").find("class");的效率是最高的！

而$("id class") 和 $("class","id")两个方法在两个浏览器之间不同的情况。

Deom