Chrome開發(fā)工具 分析 JavaScript 性能

分析 JavaScript 性能

JavaScript 分析概論

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

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

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

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

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

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

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

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

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

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

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

使用火焰圖表

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

可視化執(zhí)行路徑

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

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

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

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

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

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

如何使用火焰圖:

1.開DevTools找到配置文件面板。

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

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

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

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

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

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

• 名稱——函數(shù)的名稱。
• 自我時(shí)間——花了多長時(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í)間,不包括通過該函數(shù)調(diào)用的函數(shù)所用時(shí)間。
• 聚合的總時(shí)間—聚合總時(shí)間，對所有函數(shù)的調(diào)用所用時(shí)間,包括通過該函數(shù)調(diào)用的函數(shù)所用時(shí)間。

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

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