今天算是正式文章的最後一篇 (明天要發完賽感言XD)，在鐵人賽一開始的時候，我本來想規劃幾天的時間來跟大家一起來討論效能面版 (Performance panel)，但很可惜，我們的時間不太夠，不過至少我們今天可以介紹如何使用效能面版來檢測記憶體洩漏的問題。

我們今天使用的範例是使用前幾天檢測記憶體時用到的一段原始碼，但是我把它產生的 DOM 元素調整成 1000 個 li，方便我們可以在接下來的測試中更容易看出這個問題，你可以在 Codepen.io 上找到這個範例

在開始之前，請先打開 Chrome 開發者工具，然後切換到效能面版 (Performance panel)，在這裡它提供了兩個功能來檢測頁面，我們要使用的是第一個功能，滑鼠點擊圖示 來開始錄制，在錄制時我們可以做一些操作，就像我們之前介紹的記憶體工具一樣。但我們這邊在第一次的錄制先不要做任何操作，然後在錄制 15 秒左右時按下中間的 Stop 按鈕來停止錄制。這時候開發者工具會開始產生報告，這個一樣要花點時間等它一下。

錄制完成後我們會得到一份這樣的檔案如下圖

圖 1 : 錄制後的報告

我們今天要看的是下方的圖表，這裡有列出 JS Heap, Doucments, Nodes, Listeners 及 GPU Memory 等不同顏色的線，在圖表中現在很明顯一條藍色線是 JS Heap 就是剛剛我們錄制時頁面使用記憶體的情況。當我們在檢測時要注意的是向上爬升的線，如果記憶體使用量一直向上爬，然後一陣子後掉下來(掉下來是因為垃圾回收(Garbage collection))，但是又向上爬，這樣會產生一個向上爬升鋸齒狀的圖，這就是頁面有記憶體洩漏的問題。

所以我們可以發現 Codepen.io 本身是有點記憶體洩漏的問題，因為它的 JS Heap 記憶體使用量一直向上爬。

接下來我們再來錄制一份新的報告，這一次加入我們的產生的分離 DOM 節點。請重覆操作我們剛剛前面錄制的動作，一樣錄制 15 秒，然後在中間按下幾次 Create detached DOM nodes 按鈕(我是分別在 5, 10, 15 秒左右按下按鈕)，然後再按下 Stop 按鈕來得到新的報告

圖 2 : 加入分離 DOM 節點的新報告

在新的報告中我們會發現 Nodes 這條新的綠色線，而且它一直往上爬，這就是我們剛剛產生的這些分離的 DOM 節點。

小結

今天我們很快的介紹怎麼用效能面版來檢測記憶體洩漏的問題，有沒有發現用效能面版來檢測會比前面的記憶體工具快速？因為它有這個圖表可以讓我們很快找到頁面是不是有記憶體的問題，如果有，那你就可以透過記憶體工具來做更深入的追踪。好，今天的文章就到這裡，也祝大家新年快樂啦 :)