提出問題

如果識別出頁面中JavaScript函式的效能問題，在不同瀏覽器下有不同的測試工具：

Firefox下使用Firebug的Profile工具

Chrome下使用內建的Profile工具

IE9下也有Profile工具

雖然大家的功能一個比一個炫，但是始終解決不了兩個問題：

• 如何只檢測指定名稱空間下的函式效能，否則會產生大堆的無用資料。

• 不能跨瀏覽器使用，沒有統一的參照物。同時不同工具之間還有一定差異的背景噪音影響。

還有一點就是仍然佔據主流的IE7和IE8沒有內建的JavaScript效能檢測工具。

尋求解決方案

首先在網上找到的一篇文章是John Resig在2008年6月發表的一篇文章，是夠古老的了，不過還是非常有借鑑意義。

我們來看一下它的核心程式碼，這段程式碼用來處理jQuery.fn下的所有函式：

for(var method in jQuery.fn)(function(method){
    if(method =="init")return;

    var old = jQuery.fn[method];

    jQuery.fn[method]=function(){
        if(!internal&& curEvent){
            internal=true;
            var m = curEvent.methods[curEvent.methods.length]={
                name: method,
                inLength:this.length,
                args: formatArgs(arguments)
            };
            var start =(newDate).getTime();
            var ret = old.apply(this, arguments);
            m.duration =(newDate).getTime()- start;

            if(curEvent.event=="inline") curEvent.duration += m.duration;

            if(ret && ret.jquery) m.outLength = ret.length;
            internal=false;
            return ret;
        }else{
            return old.apply(this, arguments);
        }
    };
});

從這段程式碼中，我們看到如下一些步驟：

1. 將需要處理的函式備份起來：var old = jQuery.fn[method];

2. 使用一個新的函式覆蓋此函式：jQuery.fn[method] = function () {

3. 在新函式內，呼叫備份的原始函式，並在呼叫前後新增計時程式碼，以確定本次呼叫這個原始函式的時間：

   var start = (new Date).getTime(); var ret = old.apply(this, arguments); m.duration = (new Date).getTime() - start;

有了這個核心概念，我們可以寫個自己的JavaScript的Profile功能，而不僅僅是侷限於檢測jQuery程式碼，我們要讓使用者自己指定要檢測的JavaScript名稱空間！

我的開源實現

它的最大特點：

1. 可以指定測試的名稱空間

2. 可以跨瀏覽器使用

使用起來非常方便，只需要如下幾個步驟：

1. 在頁面的最後引入jprofile.js。（這也是安裝jprofile開源解決方案的全部步驟！）

   
   

2. 開啟頁面，可以看到右上角的那個Enable jProfile按鈕：

   
   

3. 點選那個按鈕，會彈出一個對話方塊，輸入你要檢測的名稱空間，比如"jQuery"：

   
   

4. 點選確定，頁面會自動重新整理，並顯示jProfile工具條。