Chrome開發者工具不完全指南：（三、效能篇）

滷煮在前面已經向大家介紹了Chrome開發者工具的一些功能面板，其中包括Elements、Network、Resources基礎功能部分和Sources進階功能部分，對於一般的網站專案來說，其實就是需要這幾個面板功能就可以了（再加上console面板這個萬精油）。它們的作用大多數情況下是幫助你進行功能開發的。然而在你開發應用級別的網站專案的時候，隨著程式碼的增加，功能的增加，效能會逐漸成為你需要關註的部分。那麼網站的效能問題具體是指什麼呢？在滷煮看來，一個網站的效能主要關乎兩項，一是載入效能、二是執行效能。第一項可以利用Network來分析，我以後會再次寫一篇關於它的文章分享滷煮的提高載入速度的經驗，不過在此之前，我強烈推薦你去閱讀《web高效能開髮指南》這本書中的十四條黃金建議，這是我閱讀過的最精華的書籍之一，雖然只有短短的一百多頁，但對你的幫助確實無法估量的。而第二項效能問題就體現在記憶體洩露上，這也是我們這篇文章探討的問題——透過Timeline來分析你的網站記憶體洩露。

雖然瀏覽器日新月異，每一次網站版本的更新就意味著JavaScript、css的速度更加快速，然而作為一名前端人員，是很有必要去發現專案中的效能的雞肋的。在眾多效能最佳化中，記憶體洩露相比於其他效能缺陷（網路載入）不容易發現和解決，因為記憶體洩露設計到瀏覽器處理記憶體的一些機制並且同時涉及到到你的編寫的程式碼質量。在一些小的專案中，當記憶體洩露還不足以讓你重視，但隨著專案複雜度的增加，記憶體問題就會暴露出來。首先記憶體佔有過多導致你的網站響應速度（非ajax）變得慢，就感覺自己的網頁卡死了一樣；然後你會看到任務管理器的記憶體佔用率飆升；到最後電腦感覺死了機一樣。這種情況在小記憶體的裝置上情況會更加嚴重。所以，找到記憶體洩露並且解決它是處理這類問題的關鍵。

在本文中，滷煮會透過個人和官方的例子，幫助諸位理解Timeline的使用方法和分析資料的方法。首先我們依然為該面板區分為四個區域，然後對它們裡面的各個功能進行逐一介紹:

雖然Timeline在執行它的任務時會顯得花花綠綠讓人眼花繚亂，不過不用擔心，滷煮用一句話概括它的功能就是：描述你的網站在某些時候做的事情和呈現出的狀態。我們看下區域1中的功能先：

在區域1主題是一個從左到右的時間軸，在執行時它裡面會呈現出各種顏色塊（下文中會介紹）。頂部有一條工具欄，從左到右，一次表示：

1、開始執行Timeline檢測網頁。點亮圓點，Timline開始監聽工作，在此熄滅圓點，Timeline展示出監聽階段網站的執行狀態。

2、清除所有的監聽資訊。將Timeline複原。

3、查詢和過濾監控資訊。點選會彈出一個小框框，裡面可以搜尋或者顯示隱藏你要找的資訊。

4、手動回收你網站內記憶體垃圾。

5、View：監控資訊的展示方式，目前有兩種，柱狀圖和條狀圖，在展示的事例中，滷煮預設選擇條狀圖。

6、在偵聽過程中希望抓取的資訊，js堆疊、記憶體、繪圖等。。。。

區域2是區域1的完全版，雖然他們都是展示的資訊檢視，在在區域2種，圖示會變得更加詳細，更加精準。一般我們檢視監控檢視都在區域2種進行。

區域3是展示的是一些記憶體資訊，總共會有四條曲線的變化。它們對應表示如下圖所示:

區域4中展示的是在區域2種某種行為的詳細資訊和圖表資訊。

在對功能做了簡單的介紹之後我們用一個測試用例來瞭解一下Timeline的具體用法。