JavaScript中的console.profile()函數詳細介紹_javascript技巧

編寫JavaScript程式時，如果需要知道某段程式碼的執行時間，可以使用console.time()。不過，在分析邏輯較為複雜的JavaScript程序，試圖從中找出性能瓶頸的時候，console.time()就不適用了— 深入分析邏輯較為複雜的JavaScript程序的運行就意味著插入大量的console.time( )語句，而這無疑是不可接受的。對於複雜邏輯的JavaScript程式調優，正確的方法是使用console.profile()。

瀏覽器支援

安裝了Firebug插件的Firefox、Google Chrome以及Safari都支援console.profile()語句，最新版的IE和Opera也提供了Profile功能。在幾大瀏覽器上console.profile()的使用大同小異，本文僅介紹Firebug中console.profile()的使用情形。值得注意的一點是：如果使用Firebug控制台來直接編寫JavaScript實驗程式碼，那麼console.profile()是無效的。

console.profile()的使用

console.profile()的使用非常簡單：在需要開始profile的地方插入console.profile()，在結束profile的地方插入console.profileEnd()即可。以下面的程式碼為例：

複製程式碼 程式碼如下:

function doTask(){
    doSubTaskA(1000);
    doSubTaskA(100000);
    doSubTaskB(10000);
    doSubTaskC(1000,10000);
}
function doSubTaskA(count){
    for(var i=0;i }
 
function doSubTaskB(count){
    for(var i=0;i }
 
function doSubTaskC(countX,countY){
    for(var i=0;i         for(var j=0;j     }
}

console.profile();
doTask();
console.profileEnd();

在執行doTask()函數前執行console.profile()，doTask()函數運行完成後執行console.profileEnd()，這樣即可收集到doTask()函數運行過程中的細節資訊。在Firebug的控制台中可以看到：

從結果可以看到：此次profile時間共101.901ms，涉及5次函數呼叫。結果的預設標題是”Profile”，可以透過向console.profile()函數傳入參數來進行自訂。例如，使用console.profile(“Test Profile”)即可在結果中將此profile的標題改為”Test Profile”，這對於同時執行多個profile過程的情況下尤其有用。具體profile結果中各列的意義為：

1.Function。函數名。
2.Calls。調用次數。例如，在上面的例子中，doSubTaskA()函數被執行了2次。
3.Percent。此函數呼叫所消耗的時間在總體時間中所佔的百分比。
4.Own Time。除去呼叫其它函數所消耗的時間，該函數本身的耗時數量。例如，在上面的例子中，doTask()無疑執行了很長時間，但是因為其耗時全部花在了對其它函數的呼叫上，因此其本身所耗時間並不多，僅為0.097ms。
5.Time。與Own Time相反，不考慮對其它函數的呼叫因素，計算函數的總耗時。在上面的範例中，doTask()函數執行了101.901ms。對於Time和Own Time，也可以得到一個結論：如果Time比Own Time數值要大，那麼函數內部就涉及了對其它函數的呼叫。
6.Avg。計算函數的平均總耗時，計算公式為：Avg=Time/Calls。在上面的範例中，doSubTaskA()函數被執行了2次，其總耗時為1.054ms，因此其平均總耗時為0.527ms。
7.Min。對此函數呼叫的最小耗時。例如，在上面的例子中，doSubTaskA()函數被執行了2次，其最小耗時，也就是耗時較少的那次呼叫花掉了0.016ms。
8.Max。對此函數呼叫的最大耗時。例如，在上面的例子中，doSubTaskA()函數被執行了2次，其最大耗時，也就是耗時較多的那次呼叫花掉了1.038ms。
9.File。函數所在的JS檔。

Firebug中Profile按鈕的使用

除了在JavaScript程式碼中插入console.profile()語句，Firebug也提供了Profile按鈕以便動態即時地對頁面中的JavaScript程式碼進行profile。此按鈕位置為：

當需要進行profile時，可以按下該按鈕，如果接下來的頁面操作觸發了任何JavaScript程式碼，Firebug將會對此進行記錄。 profile過程結束時只要再一次按下該按鈕即可。其最終結果與插入console.profile()語句所得到的結果時一致的。