Chrome Developer Tools：Timeline Panel說明

1、Timeline panel 概況

Timeline工具欄能夠詳細檢測出Web應用在加載過程當中，時間花費狀況的概覽。這些應用包括下載資源，處理DOM事件, 頁面佈局渲染或者向屏幕繪製元素。

以下圖，Timeline面板分爲四個模塊—控制模塊，概述模塊，火焰圖模塊，細節模塊。

 

• 控制模塊Control：控制開始記錄，中止記錄，配置一條記錄要抓取信息類型，包括：JS概況，內存，重繪，截圖。。
• 概述模塊Overview：頁面性能的一個高度總結。
• 火焰圖模塊Flame Chart：CPU棧的可視化描述。能夠看到三條豎的虛線，藍線表明DOM生成完畢，對應DOMContentLoaded event，綠線表明第一次繪製的時間，紅色表明加載完成，對應load事件。
• 細節模塊Details：當一個事件被選中，該面板顯示這個事件的更多信息。若是沒有事件選中，會顯示選中的火焰圖的信息。

2、概述模塊

概述模塊做爲對一個頁面性能的高度總結，包括3部分區域—FPS，CPU，NET。

一、FPS（Frames Per Second）

網頁動畫可以作到每秒60幀，就會跟顯示器同步刷新，一秒內進行60次從新渲染，因此要控制每次渲染的時間不能超過16.66ms。

fps表明每秒的幀數量。綠色的柱狀越高，fps越高。

綠色塊上面紅色區塊預示着長火焰，即每幀的事件過長，有多是卡頓（動畫渲染時間超過了屏幕的刷新時間）產生了。要尤爲關注。

二、CPU

cpu資源。

這個面積圖指出了哪一種事件消耗CPU資源。

三、NET

每種顏色的塊表明一種資源，塊長度越長，表明獲取這種資源的的時間也越長。

每一個塊中較淺顏色的部分表明了獲取這種資源的等待時間（從發送請求到接收到第一個byte的時間）。

深色的部分表明資源的下載時間（第一個byte接收到最後一個byte接收的時間）。

柱子的顏色對應的資源以下：【和細節模塊中顏色都是統一的】

• 藍色（Loading）：網絡通訊和HTML解析，對應html文件
• 黃色（Scripting）:Javascript執行，對應js腳本文件
• 紫色（Rendering）:樣式計算和佈局，即重排，對應stylesheets文件
• 綠色（Painting）:媒體文件

• 灰色（Other）：其餘雜七雜八資源花費的時間
• 白色（Idle）：空閒時間

3、怎樣獲取一條記錄

默認狀況下timeline面板不顯示任何數據，那麼如何獲取一條記錄呢？

一、記錄一個頁面的加載過程

打開要記錄的網頁，打開Timeline面板，刷新頁面，timeline面板會自動記錄頁面重載（若是不行可手動ctrl+E開始）。

二、記錄頁面交互

左上角灰色圓點，是錄製按鈕，點擊後變紅色，而後在頁面進行相關操做後再次按下變成灰色完成錄製。

因此記錄頁面交互步驟爲，打開timeline面板，點擊Record按鈕，按鈕在開始記錄時變紅色，此時執行頁面交互，而後中止記錄便可。

記錄交互時注意：

• 記錄時間越短越好—時間越短越好定位問題。
• 避免沒必要要操做（什麼是沒必要要?好比鼠標點擊，網絡加載等。好比要記錄點擊登陸按鈕的事件，就不要同時觸發滾動鼠標，加載圖片這些額外的事件）
• 禁止瀏覽器緩存
• 禁止插件擴展（避免沒必要要的干擾）

經過1和2就完成了一次記錄，隨後Timeline就會開始分析操做過程當中的各項性能參數顯示出來。

4、查看記錄詳情

一、細節模塊中記錄詳情

查看記錄詳情就是經過「細節模塊Details」來看。 在火焰圖模塊中，點一下選中一個事件，該事件相關的詳細信息就會展現在細節模塊中。

 Summary中不一樣顏色表明不一樣內容。

• 藍色（Loading）：網絡通訊和HTML解析
• 黃色（Scripting）:Javascript執行
• 紫色（Rendering）:樣式計算和佈局，即重排
• 綠色（Painting）:重繪
• 灰色（Other）：其餘事件花費的時間
• 白色（Idle）：空閒時間

細節模塊有4個面板，Summary面板每一個事件都會有，其餘三個只針對特定事件會有。

二、可能存在性能問題的區塊

在Timeline中，瀏覽器會在檢測過程當中發現的一些可能致使性能問題的過程進行標註， 在概況區域，可能會出現一些紅色的區塊段，這些紅色的區塊段代表，在對應的時間上執行的事件可能存在性能問題，而在火焰圖模塊，事件區塊的右上角會出現紅色的小三角，點擊當前區塊，在下面的"Summary"概要區域內會給出詳細的警告內容以下圖，瀏覽器提示「強制迴流多是一個性能瓶頸」。

‘’

5、獲取記錄時抓取屏幕截圖

 Timeline面板能夠在頁面加載時捕獲屏幕截圖，這個特色叫Filmstrip（幻燈片）。

 怎樣獲取？

 在記錄前必定要選中「Screenshots」這個複選框，屏幕截圖會保存在概述模塊中。

記錄完成後，把鼠標hover在截圖上或者概述模塊中，就能夠看到一個縮放的屏幕截圖，鼠標左右移動能夠模擬一個渲染的動畫。

 

6、javascript概況 

 在timeline獲取js分析記錄前必定要選中「JS Profile」這個複選框，記錄結束後火焰圖模塊會展現出每一個被調用的JavaScript函數。

 

7、painting概況

要讓timeline獲取更多繪圖信息，在記錄前必定要選中「Paint」這個複選框 。選中後點擊觸發一個Paint事件，細節模塊會多出一個"Paint Profile"面板來顯示更多相關信息。

Rendering 設置

在More tools>Rendering setting中可用設置渲染的一些配置，在調試一些渲染問題時很是有用。打開後在Console控制檯tab後多出一個Rendering的tab。

按Esc可用顯示或隱藏Console/Rendering面板。默認隱藏。

8、查找記錄

 若是隻想關注某種類型的事件，好比只想查看HTML渲染。就能夠查找記錄。

Ctrl+F快捷鍵呼出搜索條，輸入HTML便可。

9、放大Timeline的一部分

分析Timeline時，若是隻對某一個時間段內的某些操做感興趣，能夠經過用鼠標拖動時間軸的始末滑塊選擇要瀏覽的區域，或者滾動鼠標放大和縮小選區，火焰圖模塊會自動跟着改變。

10、保存和加載recording 

 在概況模塊或者火焰圖模塊，右鍵就能夠看到兩個選項：Save Timeline Data和Load Timeline Data。

保存後的數據格式是json格式。

 

 本文做者starof,因知識自己在變化，做者也在不斷學習成長，文章內容也不定時更新，爲避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/5443445.html有問題歡迎與我討論，共同進步。