Chrome dev-tools 系列文章：

QAQ-YS：使用 chrome-devtools Console 面板

QAQ-YS：使用 chrome-devtools Elements 面板

QAQ-YS：使用 chrome-devtools Sources 面板

QAQ-YS：使用 chrome-devtools Network 面板

QAQ-YS：使用 chrome-devtools Performance 面板

QAQ-YS：使用 chrome-devtools Memory 面板

QAQ-YS：使用 chrome-devtools Application 面板

這玩意以前叫Timeline。。。 不過功能是一樣的，小部分細節做了規範整理。

之前有說到Element，Console，Sources大多運用於debug，Network可用於debug和檢視效能，今天的主角Timeline（現已更名Performance）更多的是用在效能最佳化方面，它的作用就是記錄與分析應用程式執行過程中所產生的活動。

Performance

首先，看下這個面板長什麼樣，再依次介紹面板有的功能。。。

設定(最右上角的)

因為忘記標明它了，就先介紹吧。設定項有：

Disable JavaScript samples（不允許取樣）

Network（網路限制）

Enable advanced paint insstrumentation（slow）（記錄渲染資訊，會產生一定的效能損耗，記錄後可以再paint profile面板檢視）

CPU（CPU限制）

記錄按鈕

是否需要對當前頁面的執行進行記錄，當開啟記錄按鈕開始執行記錄過程的時候，該按鈕顯示紅色

重新整理按鈕

重新啟動記錄

清除按鈕

按下後會清除之前的記錄資訊，瞬間白板

記錄列表

就是每次記錄資料的列表

記憶體使用資訊

當開啟狀態時，記錄在記錄過程中如js堆記憶體、Node節點數等資料的記憶線

如下圖，在該記憶線上移動滑鼠，會在圖的下面出現對應時間點時的各項指標資料

heap

記憶線

錄製截圖和截圖列表

和Network的捕獲截圖是一樣的，會產生一定的效能損耗。

垃圾回收

針對記錄過程所產生的垃圾進行回收，釋放瀏覽器記憶體

FPS資訊

頁面活動時的FPS變化資訊，通常裝置的螢幕的重新整理頻率是60FPS，超過的話，則有可能產生卡頓現象，可參考這篇（需翻牆）

效果如下圖，有兩個地方可以顯示FPS資訊，當FPS過大時，會顯示紅色的長條，代表有個長幀。我們也可以觀察到，上下兩個區域的分紅條狀出現的時間點和持續的時間段是同步的。

CPU資訊

記錄瀏覽器核心的執行情況，以曲線區域圖的形式展示。黃色的表示對js的操作所佔記憶體（js程式碼評估及函式呼叫），藍色表示對html操作所佔的記憶體（主要是html編譯），紫色表示對css操作所佔的記憶體（css樣式計算等），灰色表示其他操作所佔的記憶體

展示效果如下圖所示：

網路請求資訊

網路資源請求資訊，以不同顏色的條狀表示不同的資源。黃色表示是script檔案，藍色表示是html檔案，紫色表示是css檔案，綠色表示是媒體檔案，灰色表示各種其他檔案~

效果如圖：

推薦將

http：//

FPS。CPU。NET

合起來看，如下：

函式瀑布圖

各種事件的資訊大集合，24K鈦合金狗眼已閃瞎，第一行代表隨著時間推移而發生的事件，下面各行是第一行事件的子項，由下面的各項組成第一行的整體事件。瀑布圖的資訊與CPU使用情況相符合，可從下圖中看出

具體效果如圖所示（為方便檢視，這裡擷取一段時間內的事件瀑布圖）

當記錄一個網站載入過程時，在事件瀑布面板會有三條虛線，綠色的表示第一次開始繪製頁面，藍色線代表DOM已載入完成，紅色線表示頁面載入完（包括資源引用）

效果圖：

summary(資訊彙總） & 細節展示

該區域主要展示所選內容的資訊彙總和各項細節資訊

我們可以先在時間軸上選取一段區域，看看有些什麼：

然後在事件瀑布圖中選中一個事件看看：

可以看出，該彙總會將選中目標的內容大致資訊展示出來。

bottom-up

根據事件耗時長短，反向列出事件列表，有分類可選（透過型別、域、子域、URL分類列出），面板右邊也有詳細介紹，不過基本和左邊相似，就不多介紹了。

效果圖如下：

可以看出耗時最長的是html編譯及其所花費的時間，其次是一個XHR請求。。。在這個面板的左上角還有分組篩選，將列表資料分別以activity、category、domain、subdomain、url歸類到一起。

call-tree(事件呼叫的樹形圖)

可在樹形圖中檢視各項事件的子項資訊，及各子項的資訊，同樣也有分組篩選，規則同上，面板右邊同上

效果如圖所示（和bottom-up基本相同，不同的是事件呼叫跟蹤資訊更詳細的列在了樹形圖上）：

而同一個事件在bottom-up裡是這樣的，簡化了很多：

event-log(事件日誌)

明確列出各項事件的詳細資訊，可以進行關鍵字篩選，所耗時間篩選，事件型別篩選等，右邊是詳細資訊，可看到函式呼叫棧的跟蹤資訊。

效果如圖所示：

layers

展示重新整理到某幀時的頁面，可讓開發者明確頁面每一幀的渲染情況

注意：在paint選擇框勾選的情況下可用

面板召喚過程：

選擇所選區塊

選擇長幀，出現layers面板

在layers面板浪起來

可以看到頁面在這個長幀階段後的繪製情況，旋轉可看層級立體圖，右側也有列出當前幀的詳細資訊，如size大小、為啥要合併（什麼是合併？看這篇

文章

）、記憶體評估等

paint profiler

描述頁面的繪製過程的記錄

注意：在paint選擇框勾選的情況下可用。

面板召喚過程：

選擇一個paint事件，出現paint profiler面板

在paint profiler面板浪起來

繪製過程中可以選擇一段區域，看這段區域內的頁面繪製結果是什麼樣的，比如，在這個列表中，首先是導航的繪製，然後是右側文章內容，然後是左側幾個小窗div的繪製。文字描述，相對圖形來說的，只是給列出了選中區域的繪製事件列表及繪製資訊，可點開看詳細內容，比如有textsize、left、top等屬性。

Performance面板內容是真的多，還有很多細節性的功能可以在使用過程中慢慢體會，做效能分析的時候用起來還是很順手的。

本文未記錄的內容還有：

柵格記錄（涉及渲染內容）

GPU使用記錄

Chrome的IO子執行緒使用記錄

排版任務記錄

執行緒池工作記錄

等等還有很多，具體細節自行探索（也可以一起討論）。。。

完結，撒花。