JavaScript 分析概論

使用谷歌瀏覽器,打開(kāi)V8 基準(zhǔn)套件頁(yè)面。再打開(kāi)Chrome DevTools,移導(dǎo)航到概要文件面板,并驗(yàn)證“收集JavaScript CPU配置文件”是否被選中。現(xiàn)在,單擊開(kāi)始按鈕或按 Cmd + E 開(kāi)始記錄一個(gè)JavaScript CPU配置文件。然后刷新V8基準(zhǔn)套件頁(yè)面。

當(dāng)頁(yè)面完成重載時(shí),就會(huì)顯示基準(zhǔn)測(cè)試的分?jǐn)?shù)。回到DevTools，點(diǎn)擊止按鈕或再次按下 Cmd + E 停止記錄。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/heavy-bottom-up.png" alt="" />

這種 Bottom Up 視圖通過(guò)對(duì)性能的影響程度來(lái)排列函數(shù)。您還可以檢查這些函數(shù)的調(diào)用路徑。

現(xiàn)在，通過(guò)單擊 Bottom Up / Top Down 按鈕選擇 Bottom Up 視圖。然后單擊 函數(shù) 列中左邊的小箭頭 (程序) 。 Top Down 視圖顯示了調(diào)用的整體結(jié)構(gòu),從堆棧的頂部開(kāi)始調(diào)用。

注:您可以點(diǎn)擊 Percentage 按鈕查看絕對(duì)時(shí)間百分比。

選擇函數(shù)列中的一個(gè)函數(shù),然后單擊焦點(diǎn)選定函數(shù)按鈕(右邊的眼睛圖標(biāo))。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/focus-selected-function.png" alt="" />

這個(gè)可以過(guò)濾配置文件，只顯示所選函數(shù)和其調(diào)用者。點(diǎn)擊窗口右下角的刷新按鈕恢復(fù)原狀。

選擇一個(gè)函數(shù)的函數(shù)列,然后單擊排除選擇函數(shù)按鈕(X圖標(biāo))。根據(jù)您所選擇的功能,您應(yīng)當(dāng)會(huì)看到類(lèi)似這樣的:

http://wiki.jikexueyuan.com/project/chrome-devtools/images/tree-top-down.png" alt="" />

排除選擇函數(shù)按鈕可以在整個(gè)排除函數(shù)時(shí)間里，從配置文件中刪除選中的函數(shù)并且管理調(diào)用者。單擊刷新按鈕可恢復(fù)原狀。

您可以記錄多個(gè)配置文件。點(diǎn)擊開(kāi)始分析按鈕,重新加載V8基準(zhǔn)頁(yè)面,然后單擊停止分析按鈕。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/sidebar-profile-history.png" alt="" />

左邊的欄列出你的配置文件記錄,右邊的樹(shù)視圖顯示了所選的配置文件的概要信息。

使用火焰圖表

火焰圖表視圖提供了一個(gè)JavaScript隨著時(shí)間的推移進(jìn)行處理的可視化表示,類(lèi)似時(shí)間軸和網(wǎng)絡(luò)面板里的。在 Details 視圖中使用火焰圖表功能，執(zhí)行JavaScript和CPU配置文件之后,您可以查看配置文件數(shù)據(jù)的幾個(gè)不同方式。

可視化執(zhí)行路徑

通過(guò)可視化地分析和理解函數(shù)調(diào)用過(guò)程，你可以更好地了解你的應(yīng)用程序的執(zhí)行路徑。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/flamechart00.png" alt="" />

用顏色編碼識(shí)別異常值

當(dāng)縮小可以識(shí)別的重復(fù)的模式,就能進(jìn)行優(yōu)化,或者更重要的是,你能夠發(fā)現(xiàn)異常值或意想不到的使執(zhí)行更加容易。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/flamechart-outliers.png" alt="" />

可視化 JavaScript 對(duì)時(shí)間尺度的數(shù)據(jù)分析器(如時(shí)間軸)

其他JavaScript分析報(bào)告的數(shù)據(jù)是隨時(shí)間推移而產(chǎn)生的,而火焰圖表按時(shí)間來(lái)報(bào)告數(shù)據(jù)。這意味著當(dāng)你看到事件的發(fā)生,你可以通過(guò)時(shí)間尺度,真正做到對(duì)JavaScript執(zhí)行的透視。例如,看到大的黃色條紋時(shí)間表,這是看問(wèn)題完美方式。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/flamechart02.png" alt="" />

注:水平軸表示時(shí)間，垂直軸表示調(diào)用堆棧。 Expensive 函數(shù)是寬的。Y軸表示調(diào)用堆棧,所以高火焰不一定是重要的。密切關(guān)注寬條紋,不管他們?cè)谡{(diào)用堆棧的什么位置。

如何使用火焰圖:

1.開(kāi)DevTools找到配置文件面板。

2.選擇記錄JavaScript CPU配置文件,然后單擊開(kāi)始。

3.當(dāng)你完成收集數(shù)據(jù),點(diǎn)擊停止。

在概要視圖中,選擇火焰圖可視化，該選擇菜單在底部的DevTools中。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/flamechart03.jpg" alt="" />

注:為了增加精度分析時(shí)間，可以在配置文件中的DevTools flame-chart里啟用高分辨率CPU分析。啟用之后,您可以放大圖，甚至是十分之一毫秒時(shí)間間隔也可以。

面板的頂部是一個(gè)概觀,給出了完整的記錄。你可以通過(guò)用鼠標(biāo)單擊在概觀中放大特定區(qū)域，如下所示。你也可以全景左邊和右邊，通過(guò)點(diǎn)擊白色區(qū)域并且拖動(dòng)鼠標(biāo)。在 Details 視圖中，時(shí)間尺度相應(yīng)減少。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/flamechart04.png" alt="" />

在 Details 視圖中,函數(shù)的調(diào)用堆棧被表示為一個(gè)堆?！皦K”。在某個(gè)塊頂部的塊通過(guò)下層函數(shù)塊來(lái)命名。當(dāng)鼠標(biāo)懸停在一個(gè)給定的塊上時(shí)，會(huì)顯示其函數(shù)名和時(shí)間數(shù)據(jù):

http://wiki.jikexueyuan.com/project/chrome-devtools/images/flamechart05.jpg" alt="" />

• 名稱(chēng)——函數(shù)的名稱(chēng)。
• 自我時(shí)間——花了多長(zhǎng)時(shí)間完成當(dāng)前函數(shù)的調(diào)用,只包括函數(shù)自身的聲明,不包括它調(diào)用的任何函數(shù)。
• 總時(shí)間——完成當(dāng)前函數(shù)的調(diào)用和調(diào)用其他函數(shù)的時(shí)間和。
• 自我聚合時(shí)間——聚合時(shí)間，所有記錄中函數(shù)的調(diào)用所用時(shí)間,不包括通過(guò)該函數(shù)調(diào)用的函數(shù)所用時(shí)間。
• 聚合的總時(shí)間—聚合總時(shí)間，對(duì)所有函數(shù)的調(diào)用所用時(shí)間,包括通過(guò)該函數(shù)調(diào)用的函數(shù)所用時(shí)間。

火焰圖表中的顏色比較隨機(jī),但是通過(guò)調(diào)用的函數(shù)會(huì)被標(biāo)記為相同的顏色。這就允許您看到執(zhí)行的模式,然后更容易看出異常值。這里與時(shí)間軸里使用的顏色沒(méi)有相關(guān)性。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/flamechart06.png" alt="" />

點(diǎn)擊函數(shù)塊中函數(shù)定義那一行，可以打開(kāi)它資源面板中包含的JavaScript文件。