編寫JavaScript程序時，如果需要知道某段代碼的執(zhí)行時間，可以使用console.time()。不過，在分析邏輯較為復(fù)雜的JavaScript程序，試圖從中找出性能瓶頸的時候，console.time()就不適用了 — 深入分析邏輯較為復(fù)雜的JavaScript程序的運行就意味著插入大量的console.time()語句，而這無疑是不可接受的。對于復(fù)雜邏輯的JavaScript程序調(diào)優(yōu)，正確的方法是使用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()，在結(jié)束profile的地方插入console.profileEnd()即可。以下面的代碼為例：

在運行doTask()函數(shù)前執(zhí)行console.profile()，doTask()函數(shù)運行完成后執(zhí)行console.profileEnd()，這樣即可收集到doTask()函數(shù)運行過程中的細(xì)節(jié)信息。在Firebug的控制臺中可以看到：

從結(jié)果中可以看到：此次profile時間共計101.901ms，涉及5次函數(shù)調(diào)用。結(jié)果的默認(rèn)標(biāo)題是”Profile”，可以通過向console.profile()函數(shù)傳入?yún)?shù)來進行自定義。比如，使用console.profile(“Test Profile”)即可在結(jié)果中將此次profile的標(biāo)題改為”Test Profile”，這對于同時執(zhí)行多個profile過程的情況下尤為有用。具體profile結(jié)果中各列的含義為：

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

Firebug中Profile按鈕的使用

除了在JavaScript代碼中插入console.profile()語句，F(xiàn)irebug還提供了Profile按鈕以便動態(tài)實時地對頁面中的JavaScript代碼進行profile。該按鈕位置為：

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

最新評論