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