调试 jQuery 代码时,相信大家或多或少的在使用强大的 Firebug,Firebug 控制台中的 console.time() 方法可用来计算 js 执行的时间。今天就让我们看看 console.time() 的使用以及比较下 Google Chrome、Firebug 和 IE 的执行速度。
首先,假设页面上有一个<select>下拉框,我们使用 jQuery 为它绑定 option,并分别给出了好的写法和不好的写法:
<select id="page"></select>
$(function(){
console.time('good');
var $page = $('#page'),option;
for(var i=1;i<1000;i++){
option+="<option value="+i+">第 "+i+" 页</option>";
}
//dom 操作一次
$page.append(option);
console.timeEnd('good');
console.time('bad');
var $page = $('#page')
for(var i=1;i<1000;i++){
//dom 操作999次
$page.append("<option value="+i+">第 "+i+" 页</option>");
}
console.timeEnd('bad');
console.time('very bad');
for(var i=1;i<1000;i++){
//选择999次、dom 操作999次
$('#page').append("<option value="+i+">第 "+i+" 页</option>");
}
console.timeEnd('very bad');
});
如果你使用 IE 调试 js 的话,就不能直接使用 console.time(),解决的办法是在 console.time() 代码执行前加入下边的 js 代码即可:
if(window.console && typeof(window.console.time) == "undefined") {
console.time = function(name, reset){
if(!name) { return; }
var time = new Date().getTime();
if(!console.timeCounters) { console.timeCounters = {} };
var key = "KEY" + name.toString();
if(!reset && console.timeCounters[key]) { return; }
console.timeCounters[key] = time;
};
console.timeEnd = function(name){
var time = new Date().getTime();
if(!console.timeCounters) { return; }
var key = "KEY" + name.toString();
var timeCounter = console.timeCounters[key];
if(timeCounter) {
var diff = time - timeCounter;
var label = name + ": " + diff + "ms";
console.info(label);
delete console.timeCounters[key];
}
return diff;
};
}
下边的表格是我在三种浏览器下执行 console.time() 后得到的运行时间:
可明显注意到好的 jQuery 代码和不好的 jQuery 代码在性能上的差异,所以我们在书写 jQuery 代码时要多加注意。当然,这个结果不能绝对说明三种浏览器在处理 js 时的速度,但还是有一定的参考意义,如果还没有使用Google Chrome的话,推荐你使用它,相信你会喜欢上它的!
类似方法有:(new Date()).valueOf();