Chrome開發者工具詳解(3)-Timeline面板
注： 這一篇主要講解面板Timeline，參考了Google的相關文檔，主要用於公司內部技術分享。。
注： 這一篇主要講解面板Timeline，參考了Google的相關文檔，主要用於公司內部技術分享。。
Timeline面板
Timeline面板是整個面板里面最復雜的一個面板，涉及的東西比較多。可以利用這個面板來記錄和分析網頁運行過程中的所有活動行為信息。
你可以充分利用這個面板來分析你的網頁的程序性能問題。
概述
下圖是從Google官方網站中介紹Timeline面板的圖貼到這里，該面板主要包括4大塊窗格(Pane)：
- Controls 錄制開關和控制錄制過程中需要記錄哪些信息。
- Overview 網頁性能的概要信息。
- Flame Chart CPU堆棧軌跡的可視化圖表(火焰圖)。在圖表里面有1到3條虛豎線。
- Details 當選擇一個指定的事件后，會顯示這個事件的更多信息；當沒有選擇事件時，會顯示指定的時間幀信息。
Flame Chart里面的虛豎線含義：藍色標記DOMContentLoaded事件；綠色標記第一次的繪制時間點；紅色代表load事件。
其中第2塊Overview顯示了網頁性能相關的概要信息，可以通過鼠標或者區域邊界上的灰色滑塊來拖出一個指定區域范圍，Flame Chart會跟着局部放大顯示指定區域內的詳情信息。
可以通過鍵盤上的
W,S來放大和縮小指定區域，通過A,D來向左或向右移動指定區域。
從Google把圖貼到這里，這個窗格包含了三個圖表：
- FPS 每秒幀數(Frames Per Second)。綠色柱狀條越高，則每秒幀數越高。在FPS圖表上方的紅色塊是標記一個長幀。
- CPU 標記CPU資源的使用情況，這里的面積圖標記着消耗CPU資源的各類事件。
- NET 各種顏色的柱狀條分別顯示一種資源。柱狀條越長，代表獲取這個資源的時間越長。
CPU面積圖中各顏色的含義：藍色代表HTML文件；黃色代表腳本文件；紫色代表樣式文件；綠色代表媒體文件；灰色代表其它雜項文件。
NET圖表柱狀條兩種顏色的含義：較亮的部分表示等待時間（當資源被請求時，直到第一個字節被下載的時間)；較暗的部分表示傳輸時間(在第一個和最后一個字節被下載之間的時間)。
網頁錄制詳情
支持兩種網頁錄制操作：①錄制網頁加載，②錄制網頁交互。為了便於分析，錄制的時間不宜太長、還要避免不必要的交互操作、並禁用瀏覽器的緩存和插件。
當錄制完成后，在Flame Chart(火焰圖)中點擊左側三角可以展開詳情，點擊其中的事件或者空白處，可以在Details里面查看該事件或者總的概要信息。這里面包含的信息量很大，限於篇幅原因，下次有機會再作深入介紹，或者直接到Google上查看Timeline Event Reference這個參考文檔。
錄制中進行JS分析
在錄制之前點擊Controls中的JS Profile復選框，可以在時間軸中捕獲JavaScript的堆棧信息(會產生一定的性能消耗)，並且在Flame Chart(火焰圖)中會顯示所有被調用的JavaScript函數信息。
錄制中捕獲截屏
在錄制之前點擊Controls中的Screenshots復選框，可以在錄制過程中捕獲截屏，鼠標在Overview上從左向右移動則可以看到錄制的動畫。
繪制解析
在錄制之前點擊Controls中的Paint復選框，可以獲取繪制事件的更多細節信息（注意這會產生很多的性能消耗）。如果要深入了解網頁渲染方面的信息，可以點擊DevTools右上角的菜單，在More tools里面選中Rendering settings，這里面包含了如下設置項：
- Paint Flashing 高亮顯示網頁中需要被重繪的部分。
- Layer Borders 顯示Layer邊界。
- FPS Meter 每一秒的幀細節，幀速率的分布信息和GPU的內存使用情況。
- Scrolling Performance Issues 分析鼠標滾動時的性能問題，會顯示使屏幕滾動變慢的區域。
- Emulate CSS Media 仿真CSS媒體類型，查看不同的設備上CSS樣式效果，可能的媒體類型選項有
print、screen。
把上面的所有設置項勾選上，網頁的顯示效果如下：
查詢指定事件
你可以通過在DevTools上按Cmd+F(Mac)調出查詢框，來查看指定時間區域范圍內的指定類型的事件，點擊Cmd+G(Mac)或者Cmd+Shift+G(Mac)可以按事件發生的順序來查詢。
圖中查詢到了4個紅色標記着的Parse HTML事件，點擊Cmd+G焦點會在這4個事件移動。
運行時性能分析
上面大致介紹了Timeline面板上的各個功能菜單，那么如何去利用該面板去分析和優化網頁程序的運行性能呢，由於篇幅限制，就不在這邊展開討論，感興趣的讀者直接到Google開發者文檔上查看，Google開發者文檔有最權威最新的信息。