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開發者文件有最權威最新的資訊。