JavaScript中的console.profile()函數(shù)詳細(xì)介紹
編寫JavaScript程序時(shí),如果需要知道某段代碼的執(zhí)行時(shí)間,可以使用console.time()。不過(guò),在分析邏輯較為復(fù)雜的JavaScript程序,試圖從中找出性能瓶頸的時(shí)候,console.time()就不適用了 — 深入分析邏輯較為復(fù)雜的JavaScript程序的運(yùn)行就意味著插入大量的console.time()語(yǔ)句,而這無(wú)疑是不可接受的。對(duì)于復(fù)雜邏輯的JavaScript程序調(diào)優(yōu),正確的方法是使用console.profile()。
瀏覽器支持
安裝了Firebug插件的Firefox、Google Chrome以及Safari都支持console.profile()語(yǔ)句,最新版的IE和Opera也提供了Profile功能。在幾大瀏覽器上console.profile()的使用大同小異,本文僅介紹Firebug中console.profile()的使用情況。值得注意的一點(diǎn)是:如果使用Firebug控制臺(tái)來(lái)直接編寫JavaScript實(shí)驗(yàn)代碼,那么console.profile()是無(wú)效的。
console.profile()的使用
console.profile()的使用非常簡(jiǎn)單:在需要開(kāi)始profile的地方插入console.profile(),在結(jié)束profile的地方插入console.profileEnd()即可。以下面的代碼為例:
function doTask(){
doSubTaskA(1000);
doSubTaskA(100000);
doSubTaskB(10000);
doSubTaskC(1000,10000);
}
function doSubTaskA(count){
for(var i=0;i<count;i++){}
}
function doSubTaskB(count){
for(var i=0;i<count;i++){}
}
function doSubTaskC(countX,countY){
for(var i=0;i<countX;i++){
for(var j=0;j<countY;j++){}
}
}
console.profile();
doTask();
console.profileEnd();
在運(yùn)行doTask()函數(shù)前執(zhí)行console.profile(),doTask()函數(shù)運(yùn)行完成后執(zhí)行console.profileEnd(),這樣即可收集到doTask()函數(shù)運(yùn)行過(guò)程中的細(xì)節(jié)信息。在Firebug的控制臺(tái)中可以看到:

從結(jié)果中可以看到:此次profile時(shí)間共計(jì)101.901ms,涉及5次函數(shù)調(diào)用。結(jié)果的默認(rèn)標(biāo)題是”Profile”,可以通過(guò)向console.profile()函數(shù)傳入?yún)?shù)來(lái)進(jìn)行自定義。比如,使用console.profile(“Test Profile”)即可在結(jié)果中將此次profile的標(biāo)題改為”Test Profile”,這對(duì)于同時(shí)執(zhí)行多個(gè)profile過(guò)程的情況下尤為有用。具體profile結(jié)果中各列的含義為:
1.Function。函數(shù)名。
2.Calls。調(diào)用次數(shù)。比如,在上面的例子中,doSubTaskA()函數(shù)被執(zhí)行了2次。
3.Percent。該函數(shù)調(diào)用所消耗的時(shí)間在總體時(shí)間中所占的百分比。
4.Own Time。除去調(diào)用其它函數(shù)所消耗的時(shí)間,該函數(shù)本身的耗時(shí)數(shù)量。比如,在上面的例子中,doTask()無(wú)疑執(zhí)行了很長(zhǎng)時(shí)間,但是因?yàn)槠浜臅r(shí)全部花在了對(duì)其它函數(shù)的調(diào)用上,因此其本身所耗時(shí)間并不多,僅為0.097ms。
5.Time。與Own Time相反,不考慮對(duì)其它函數(shù)的調(diào)用因素,計(jì)算函數(shù)的總耗時(shí)。在上面的例子中,doTask()函數(shù)執(zhí)行了101.901ms。對(duì)于Time和Own Time,也可以得到一個(gè)結(jié)論:如果Time比Own Time數(shù)值要大,那么該函數(shù)內(nèi)部就涉及了對(duì)其它函數(shù)的調(diào)用。
6.Avg。計(jì)算函數(shù)的平均總耗時(shí),其計(jì)算公式為:Avg=Time/Calls。在上面的例子中,doSubTaskA()函數(shù)被執(zhí)行了2次,其總耗時(shí)為1.054ms,因此其平均總耗時(shí)為0.527ms。
7.Min。對(duì)該函數(shù)調(diào)用的最小耗時(shí)。比如,在上面的例子中,doSubTaskA()函數(shù)被執(zhí)行了2次,其最小耗時(shí),也就是耗時(shí)較少的那次調(diào)用花掉了0.016ms。
8.Max。對(duì)該函數(shù)調(diào)用的最大耗時(shí)。比如,在上面的例子中,doSubTaskA()函數(shù)被執(zhí)行了2次,其最大耗時(shí),也就是耗時(shí)較多的那次調(diào)用花掉了1.038ms。
9.File。函數(shù)所在的JS文件。
Firebug中Profile按鈕的使用
除了在JavaScript代碼中插入console.profile()語(yǔ)句,F(xiàn)irebug還提供了Profile按鈕以便動(dòng)態(tài)實(shí)時(shí)地對(duì)頁(yè)面中的JavaScript代碼進(jìn)行profile。該按鈕位置為:

當(dāng)需要進(jìn)行profile時(shí),可以按下該按鈕,如果接下來(lái)的頁(yè)面操作觸發(fā)了任何JavaScript代碼,F(xiàn)irebug將會(huì)對(duì)此進(jìn)行記錄。profile過(guò)程結(jié)束時(shí)只要再一次按下該按鈕即可。其最終結(jié)果與插入console.profile()語(yǔ)句所得到的結(jié)果時(shí)一致的。
- JavaScript 輸出顯示內(nèi)容(document.write、alert、innerHTML、console.log)
- 利用Js的console對(duì)象,在控制臺(tái)打印調(diào)式信息測(cè)試Js的實(shí)現(xiàn)
- javascript代碼調(diào)試之console.log 用法圖文詳解
- js console.log打印對(duì)像與數(shù)組用法詳解
- javascript中alert()與console.log()的區(qū)別
- JS中捕獲console.log()輸出的方法
- JavaScript中的console.dir()函數(shù)介紹
- JavaScript中的console.trace()函數(shù)介紹
- Javascript的console['''']常用輸入方法匯總
相關(guān)文章
JavaScript中關(guān)于for循環(huán)刪除數(shù)組元素內(nèi)容時(shí)出現(xiàn)的問(wèn)題
昨天在用for循環(huán)進(jìn)行數(shù)組去重的時(shí)候出現(xiàn)的問(wèn)題小結(jié),怎么解決這個(gè)問(wèn)題呢,今天小編通過(guò)本文給大家講解下js循環(huán)刪除數(shù)組元素的方法,一起看看吧2016-11-11
el-table解決過(guò)濾導(dǎo)致選中的丟失的問(wèn)題
在使用Element UI的el-table組件時(shí),可能會(huì)遇到過(guò)濾數(shù)據(jù)后選中狀態(tài)丟失的問(wèn)題,解決這一問(wèn)題的關(guān)鍵在于利用Vue的計(jì)算屬性和事件綁定功能,感興趣的朋友跟隨小編一起看看吧2024-09-09
小程序開(kāi)發(fā)中如何使用async-await并封裝公共異步請(qǐng)求的方法
在平常的項(xiàng)目開(kāi)發(fā)中肯定會(huì)遇到同步異步執(zhí)行的問(wèn)題,這篇文章主要介紹了小程序開(kāi)發(fā)中如何使用async-await并封裝公共異步請(qǐng)求的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01
如何用JavaScript實(shí)現(xiàn)功能齊全的單鏈表詳解
這篇文章主要給大家介紹了關(guān)于如何用JavaScript實(shí)現(xiàn)功能齊全的單鏈表的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)端播放攝像頭實(shí)時(shí)畫(huà)面
這篇文章主要介紹了如何利用JavaScript實(shí)現(xiàn)在網(wǎng)頁(yè)端播放局域網(wǎng)(不能上云)或是廣域網(wǎng)的攝像頭的實(shí)時(shí)畫(huà)面,文中的示例代碼講解詳細(xì),需要的可以參考一下2022-02-02
JavaScript/jQuery實(shí)現(xiàn)切換頁(yè)面效果
這篇文章主要為大家詳細(xì)介紹了JavaScript或jQuery實(shí)現(xiàn)切換頁(yè)面效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
BootStrap Table對(duì)前臺(tái)頁(yè)面表格的支持實(shí)例講解
bootstrap-table是在bootstrap的基礎(chǔ)上面做了一些封裝,所以在使用bootstrap-table之前要導(dǎo)入的js和css,下面通過(guò)本文給大家詳細(xì)介紹需要引入的文件,對(duì)bootstrap table 表格感興趣的朋友一起看看吧2016-12-12
JavaScript遞歸函數(shù)解“漢諾塔”算法代碼解析
這篇文章主要介紹了JavaScript遞歸函數(shù)解“漢諾塔”算法代碼解析,需要的朋友可以參考下2018-07-07

