Chrome 火焰圖

對於 Web 開發者來說，Chrome 是首選開發瀏覽器之一，因其豐富的除錯工具，大大加了快 debug 效率。那麼除了常用的斷點除錯、網路請求等功能，Chrome 還提供了火焰圖分析，下面就來介紹一下基於 Chrome 瀏覽器的火焰圖除錯和使用方法。

首先開啟控制檯，切換到 Performance 皮膚，點選左上角的重新整理按鈕（當然也可以使用 record 按鈕），等頁面重新整理完畢後會生成一張火焰圖。火焰圖由 x、y 兩個座標軸組成，y軸表示呼叫堆疊，你可以簡單的理解為函式的層級呼叫，x軸為執行時間，即某個函式執行過程的時長。

下面我們用一個示例來說明，如何使用火焰圖進行除錯。

var i = 0, arr = [];

while(i < 4000000) {
    arr.push(i);
    i++
}

function testFor() {
    var result = [];
    for (var i = 0; i < arr.length; i++) {
        result.push(i);
    }
}

function testForEach() {
    var result = [];
    arr.forEach(function(i) {
        result.push(i);
    });
}

// 分別測試兩個方法
testForEach();
testFor();

以上程式碼可以看成是對 for 與 forEach 的效能測試，那麼以該示例為基準，我們來看下在火焰圖中是怎樣分析的。先來看下呼叫 testFor() 方法生成的火焰圖：

注意截圖左半部分的藍色框標記處，上面標明瞭 “testFor”，說明該堆疊為 testFor() 方法的呼叫，在下方的 “Summary” 處寫明瞭當前方法的總共消耗時長為 100.86ms ，方法從生成到呼叫消耗了 34.9ms，而方法內的迴圈執行了 60.0ms。

我們再來看下呼叫 testForEach() 方法生成的火焰圖：

通過檢視下方的 “Summary” 可知，testForEach() 方法總耗時為 163.77ms，方法從生成到呼叫消耗了 1.0ms，而方法內的迴圈執行了 168.8ms。

由此可得出結論，在相同環境下，普通的 for 迴圈比 forEach 效率高。當然，以上實驗並不是很準確，只是象徵性的測試，感興趣的同學可以動手嘗試一下。

好了，總結下火焰圖分析的基本要素：

1. 首先要明白火焰圖的 x軸、y軸分別代表什麼，x軸為執行時長，y軸為堆疊呼叫；

2. 然後在 y 軸的頂部部分找到呼叫時長較長的方法

    a. 這裡的頂部指的是山峰的部分，即視覺的下半部分。

    b. 為什麼在頂部找，是因為底部的方法為底層方法，我們自己寫的程式碼通常在業務方法裡，也就是呼叫堆疊的偏上部分

3. 結合底部 “Summary” 皮膚給出的資訊，分析當前方法是否造成了效能瓶頸。

以上就是 Chrome 火焰圖的基本使用方法，有沒有覺得很簡單呢～

注意：本文所說的火焰圖是基於瀏覽器的，而非標準火焰圖，如果想了解標準的火焰圖，可以看阮老師的文章 如何讀懂火焰圖