【原文地址】https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool
該文章介紹了 Timeline 工具的基本組成以及如何使用該工具對頁面事件進行記錄，具體的調(diào)試細節(jié)還得更具讀者的具體使用場景和調(diào)試目的對數(shù)據(jù)進行分析得到解決方案，該文章算是對 Chrome Timeline 工具的一個使用說明書。

使用 Chrome DevTools 的 Timeline 面板記錄程序運行時的所有行為，并用于加以分析是解決程序性能問題的最好方案。

timeline-panel

目錄結(jié)構(gòu)

• Timeline面板概括（Timeline panel overview）
• 開始一次記錄（Make a recording）
• 查看記錄詳細信息（View recording details）
• 在記錄期間獲取頁面截圖信息（Capture screenshots during recording）
• 分析 JavaScript（Profile JavaScript）
• 分析 painting（Profile painting）
• 在記錄中查找（Search records）
• Zoom in on a Timeline section
• 保持和載入記錄（Save and load recordings）

通過 Timeline 記錄頁面加載后所發(fā)生的各種事件和交互。
在 Overview 區(qū)域查看 FPS，CPU 和 網(wǎng)絡(luò)請求信息
點擊 Flame Chart 上的一個事件記錄查看其詳細信息
放大某一段記錄，更利于分析

Timeline panel overview

Timeline 面板由一下 4 個子面板構(gòu)成：

1. 控制面板（Controls）
   開啟記錄，停止記錄，配置記錄期間需要記錄那些內(nèi)容。

2. 概括（Overview）
   對頁面表現(xiàn)（行為）的一個概述。

3. Flame Chart
   可視化 CPU 堆棧(stack)信息記錄
   在 Flame Chart 面板上你可能看到三根垂直的線，藍線代表 DOMContentLoaded 事件，綠線代表渲染開始的時間( time to first paint)，紅線代表 load 事件。

4. 詳細信息（Detail）
   當(dāng)有具體事件被選擇時，該面板展示這個事件的更多詳細信息。如果沒有事件被選擇，該面板展示當(dāng)前所選時間段的一些信息。

timeline-annotated

Overview pane

概括區(qū)域由一下三個圖形記錄組成:

1. FPS. Frames Per Second.
   綠色的柱越高， FPS 值也越高。FPS 圖表上方的紅色小塊指明了長幀(long frame，較慢渲染？)，這些 long frame 可能是卡頓(jank)

2. CPU. CPU Resources.
   這個面積圖(area chart)表明了哪種事件在消耗 CPU 資源。

3. NET.
   每種不同顏色的條代表一種資源。這個條越長表明獲取( retrieve )該資源所花的時間越長。

每個條中的淺色部分代表等待時間（資源請求被發(fā)送到收到第一個響應(yīng)字節(jié)的時間），深色部分代表文件傳輸時間（從收到第一個字節(jié)到這個資源完全被下載好）

藍色 代表 HTML 文件，黃色 代表 Script 文件，紫色 代表 Stylesheets 文件， 綠色 代表 Media 文件，灰色 代表其他資源。

overview-annotated

Make a recording

• 記錄一個頁面的loading過程
  打開 Timeline 面板，在當(dāng)前 Tab 打開你想要記錄的頁面，然后刷新該頁面，Timeline 面板會自動的記錄一個頁面的 reload。

• 記錄頁面上的交互
  打開 Timeline 面板，點擊該面板左上的 Record 按鈕( ● ) 或者通過快捷鍵(Cmd + E/Ctrl + E) 開始記錄。
  當(dāng) Timeline 正在記錄頁面事件時，Record 按鈕會變成紅色的。
  在記錄期間進行一些想要分析的頁面交互，當(dāng)再次發(fā)送 Record 命令（●按鈕，或鍵盤快捷方式）時會停止這次記錄。

當(dāng)記錄停止過后，DevTools 會自動去分析那塊內(nèi)容是你最關(guān)心的，并且會自動的放大（選擇）那塊區(qū)域。

Recording Tips：

• Keep recordings as short as possible.
  保持記錄內(nèi)容盡可能的少，通常越短的記錄越利于分析。
• Avoid unnecessary actions.
  避免一些你并不關(guān)心的無用的事件（比如：鼠標(biāo)點擊，網(wǎng)絡(luò)加載）。比如，你希望分析的是點擊 Login button 后的處理事件，就不要去滾動當(dāng)前頁面，加載更多的圖片，或其他一些無關(guān)事件。
• Disable the browser cache.
  當(dāng)記錄分析一些網(wǎng)絡(luò)相關(guān)事件時，禁用瀏覽器的緩存是個不錯的主意。你可以在 DevTools Settings 面板或者 Network conditions 面板禁用緩存。
• Disable extensions.
  Chrome 瀏覽器擴展會在記錄中添加一些不相關(guān)的 noise 到 Timeline 記錄中。可以通過打開 隱身模式 或者創(chuàng)建一個新的瀏覽器用戶來確保你的Chrome環(huán)境下沒有擴展插件。

View recording details

當(dāng)你在 Flame Chart 中選擇一個具體的事件，Detail 區(qū)域會展示一些關(guān)于該事件的額外信息。

details-pane

上圖中的一些 tab，比如 __Summay __ 對所有的事件都會有對應(yīng)的展示信息，其他的一些 tab 只有對于某些特定的事件類型才有展示內(nèi)容?？梢酝ㄟ^查看 Timeline event reference 查看 tab 和事件類型的關(guān)系。

Capture screenshots during recording

TImeline 面板還可以在記錄期間對頁面進行截屏重現(xiàn)，這個特性就像幻燈片查看一樣。

如果要對一個頁面的進行截屏重現(xiàn)，現(xiàn)在 控制區(qū)域(Controls pane) 中勾選 Screenshots，然后開始記錄，完成記錄后，頁面的截屏?xí)宫F(xiàn)在 概述面板(Overview pane)下方。

timeline-filmstrip.png

將鼠標(biāo)移動到 概述區(qū)域 或 截屏 上可以查看到當(dāng)前點上頁面截屏放大的圖像，左右移動鼠標(biāo)來模擬記錄期間頁面的動態(tài)效果。

Profile JavaScript

在開始記錄之前，在控制區(qū)域(Control pane)勾選 JS Profile，這樣記錄的時候就會去記錄 JavaScript stacks 相關(guān)信息。這時你的 Flame Chart 中將會記錄任何一個被調(diào)用過的方法。

js-profile

Profile painting

和 Profile Javascript 一樣，你需要先在控制區(qū)域勾選 Paint 來在后面的記錄中記錄 Paint 事件，此時，當(dāng)你在記錄結(jié)果中選擇一個 Paint 事件后，Paint Priflter 這個 tab 將會出現(xiàn)在 Details 區(qū)域，該 tab 將會展示更多當(dāng)前關(guān)于當(dāng)前事件的信息。

paint-profiler

Rendering settings

打開 DevTools 的主菜單，選擇 More tools > Rendering settings來配置一些 rendering settings，這些可能會對調(diào)試渲染問題很有幫助。開啟 rendering settings 后，會在 Console drawer 旁邊添加一個 Rendering tab。如果 Console drawer 沒有展現(xiàn)在頁面上，可通過 ESC 使其展示出來。

rendering-settings

Search records

查看記錄的事件時，你可能只希望關(guān)注于某一類型的事件，比如你只是希望查看每個 Parse HTML 事件的詳細信息。

通過使用 Cmd + F/Ctrl + F快捷鍵，在 Timeline 區(qū)域中打開 搜索工具欄，在搜索工具欄中輸入你想分析的事件類型，比如 Event.

工具欄只會將搜索條件作用在當(dāng)前選擇的時間表內(nèi)的事件，在時間表外的事件都不會顯示在結(jié)果中。

搜索工具欄中的上下箭頭可以幫助你按事件發(fā)生的先后順序查看過濾后的事件的詳細信息。第一條記錄代表當(dāng)前選區(qū)最先發(fā)生的事件，最后一條記錄代表當(dāng)前選區(qū)最后發(fā)生的事件。每次點擊上下箭頭，就會選擇一個新的事件，所以你可以在 Details 面板查看這個事件的具體信息。（點擊上下箭頭和在 Flame Chart 選擇一個事件是等效的）

find-toolbar

Zoom in on a Timeline section

指定某一個 Recording 結(jié)果區(qū)域，將會更有利于對記錄數(shù)據(jù)的分析。可以通過在 Overview 區(qū)域選擇某一塊內(nèi)容，來定位到某一塊 recording 數(shù)據(jù)。當(dāng)在 Overview 區(qū)域選擇某一塊內(nèi)容后，Flame Chart 會自動定位到匹配的區(qū)域，并更清楚的展示對應(yīng)內(nèi)容。

zoom

可以通過下面的方式來指定選擇一塊區(qū)域：

• 在 Overview 面板，通過鼠標(biāo)拖選出關(guān)注的內(nèi)容
• 通過調(diào)整 ruler 區(qū)域的灰色滑塊來選出關(guān)注的內(nèi)容

一旦你選擇了某一塊內(nèi)容，你可以使用 W, A, S, D 鍵來調(diào)整選區(qū)，W 和 S 用來放大放小選取，A 和 D 分別向左向右移動選區(qū)。（測試中沒發(fā)現(xiàn)具體怎么使用，通過手動選區(qū)來實現(xiàn)這些功能）

Save and load recordings

你可以通過在 概述面板 或 Flame Chart 區(qū)域點擊鼠標(biāo)左鍵，在彈出的菜單中選擇相關(guān)選項，實現(xiàn)Save 和 Load recordings。

save-open