• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
邹天得
博客园    首页    新随笔    联系   管理    订阅  订阅
使用 console.time() 计算jQuery代码执行时间

调试 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();

posted on 2017-07-08 20:59  邹天得  阅读(815)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3