一、Timeline panel 概況

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

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

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

二、概述模塊

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

1、FPS（Frames Per Second）

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

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

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

2、CPU

cpu資源。

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

3、NET

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

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

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

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

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

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

三、怎樣獲取一條記錄

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

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

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

2、記錄頁面交互

左上角灰色圓點，是錄制按鈕，點擊后變紅色，然后在頁面進行相關操作后再次按下變成灰色完成錄制。

所以記錄頁面交互步驟為，打開timeline面板，點擊Record按鈕，按鈕在開始記錄時變紅色，此時執行頁面交互，然后停止記錄即可。

記錄交互時注意：

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

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

四、查看記錄詳情

1、細節模塊中記錄詳情

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

Summary中不同顏色代表不同內容。

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

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

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

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

‘’