使用 Chrome DevTools 的 Timeline 面板能夠記錄和分析您的應用在運行時的全部活動。 這裏是開始調查應用中可覺察性能問題的最佳位置。web
TL;DR
- 執行 Timeline 記錄，分析頁面加載或用戶交互後發生的每一個事件。
- 在 Overview 窗格中查看 FPS、CPU 和網絡請求。
- 點擊火焰圖中的事件以查看與其相關的詳細信息。
- 放大顯示一部分記錄以簡化分析。
Timeline 面板概覽
Timeline 面板包含如下四個窗格：chrome
- Controls。開始記錄，中止記錄和配置記錄期間捕獲的信息。
- Overview。 頁面性能的高級彙總。更多內容請參見下文。
-
火焰圖。 CPU 堆疊追蹤的可視化。瀏覽器
您能夠在火焰圖上看到一到三條垂直的虛線。藍線表明
DOMContentLoaded事件。 綠線表明首次繪製的時間。 紅線表明load事件。緩存 -
Details。選擇事件後，此窗格會顯示與該事件有關的更多信息。 未選擇事件時，此窗格會顯示選定時間範圍的相關信息。網絡
Overview 窗格
Overview 窗格包含如下三個圖表：ide
- FPS。每秒幀數。綠色豎線越高，FPS 越高。 FPS 圖表上的紅色塊表示長時間幀，極可能會出現卡頓。
-
CPU。 CPU 資源。此面積圖指示消耗 CPU 資源的事件類型。chrome-devtools
-
NET。每條彩色橫槓表示一種資源。橫槓越長，檢索資源所需的時間越長。 每一個橫槓的淺色部分表示等待時間（從請求資源到第一個字節下載完成的時間）。函數
深色部分表示傳輸時間（下載第一個和最後一個字節之間的時間）。工具
橫槓按照如下方式進行彩色編碼：性能
- HTML 文件爲藍色。
- 腳本爲黃色。
- 樣式表爲紫色。
- 媒體文件爲綠色。
- 其餘資源爲灰色。
作記錄
要記錄頁面加載，請打開 Timeline 面板，打開想要記錄的頁面，而後從新加載頁面。 Timeline 面板會自動記錄頁面從新加載。
要記錄頁面交互，請打開 Timeline 面板，而後按 Record 按鈕 () 或者鍵入鍵盤快捷鍵 Cmd+E (Mac) 或 Ctrl+E(Windows / Linux)，開始記錄。記錄時，Record 按鈕會變成紅色。執行頁面交互，而後按 Record 按鈕或再次鍵入鍵盤快捷鍵中止記錄。
完成記錄後，DevTools 會猜想哪一部分記錄與您最相關，並自動縮放到那一個部分。
記錄提示
- 儘量保持記錄簡短。簡短的記錄一般會讓分析更容易。
- 避免沒必要要的操做。避免與您想要記錄和分析的活動無關聯的操做（鼠標點擊、網絡加載，等等）。例如，若是您想要記錄點擊 Login 按鈕後發生的事件，請不要滾動頁面、加載圖像，等等。
- 停用瀏覽器緩存。記錄網絡操做時，最好從 DevTools 的 Settings 面板或 Network conditions 抽屜式導航欄停用瀏覽器的緩存。
- 停用擴展程序。Chrome 擴展程序會給應用的 Timeline 記錄增長不相關的噪聲。 以隱身模式打開 Chrome 窗口或者建立新的 Chrome 用戶我的資料，確保您的環境中沒有擴展程序。
查看記錄詳細信息
在火焰圖中選擇事件時，Details 窗格會顯示與事件相關的其餘信息。
一些標籤（如 Summary）適用於全部事件類型。其餘標籤則僅對特定事件類型可用。 請參閱 Timeline 事件參考，瞭解與每一個記錄類型相關的詳細信息。
在記錄期間捕捉屏幕截圖
Timeline 面板能夠在頁面加載時捕捉屏幕截圖。此功能稱爲幻燈片。
在您開始記錄以前，請在 Controls 窗格中啓用 Screenshots 複選框，以便捕捉記錄的屏幕截圖。 屏幕截圖顯示在 Overview 窗格下方。
將您的鼠標懸停在 Screenshots 或 Overview 窗格上能夠查看記錄中該點的縮放屏幕截圖。 左右移動鼠標能夠模擬記錄的動畫。
分析 JavaScript
開始記錄前，請啓用 JS Profile 複選框，以便在您的時間線記錄中捕捉 JavaScript 堆棧。 啓用 JS 分析器後，您的火焰圖會顯示調用的每一個 JavaScript 函數。
分析繪製
開始記錄前，請啓用 Paint 複選框，以便獲取有關 Paint 事件的更多數據分析。 啓用繪製分析並點擊 Paint 事件後，新 Paint Profiler 標籤會出如今 Details 窗格中，後者顯示了許多與事件相關的更精細信息。
渲染設置
打開主 DevTools 菜單，而後選擇More tools > Rendering settings 訪問渲染設置，這些設置在調試繪製問題時很是有用。渲染設置會做爲一個標籤顯示在 Console 抽屜式導航欄（若是隱藏，請按 esc 顯示抽屜式導航欄）旁邊。
搜索記錄
查看事件時，您可能但願側重於一種類型的事件。例如，您可能須要查看每一個 Parse HTML 事件的詳細信息。
在 Timeline 處於焦點時，按 Cmd+F (Mac) 或 Ctrl+F (Windows / Linux) 以打開一個查找工具欄。鍵入您想要檢查的事件類型的名稱，如 Event。
工具欄僅適用於當前選定的時間範圍。選定時間範圍之外的任何事件都不會包含在結果中。
利用上下箭頭，您能夠按照時間順序在結果中移動。因此，第一個結果表示選定時間範圍內最先的事件，最後一個結果表示最後的事件。每次按向上或向下箭頭會選擇一個新事件，所以，您能夠在 Details 窗格中查看其詳細信息。按向上和向下箭頭等同於在火焰圖中點擊事件。
在 Timeline 部分上放大
您能夠放大顯示一部分記錄，以便簡化分析。使用 Overview 窗格能夠放大顯示一部分記錄。 放大後，火焰圖會自動縮放以匹配同一部分。
要在 Timeline 部分上放大，請執行如下操做：
- 在 Overview 窗格中，使用鼠標拖出 Timeline 選擇。
- 在標尺區域調整灰色滑塊。
選擇部分後，可使用 W、A、S 和 D 鍵調整您的選擇。 W 和 S 分別表明放大和縮小。 A 和 D 分別表明左移和右移。
保存和打開記錄
您能夠在 Overview 或火焰圖窗格中點擊右鍵並選擇相關選項，保存和打開記錄。