chrome-performance頁面性能分析使用教程
運行時性能表現（runtime performance）指的是當你的頁面在瀏覽器運行時的性能表現，而不是在下載頁面的時候的表現。這篇指南將會告訴你怎麽用Chrome DevTools Performance功能去分析運行時性能表現。在RAIL性能評估模型下，你可以在這篇指南中可以學到怎麽去用這個performance功能去分析Response, Animation, 以及 Idle 這三個性能指標。
一、模擬移動設備的CPU
移動設備的CPU一般比臺式機和筆記本弱很多。當你想分析頁面的時候，可以用CPU控制器（CPU Throttling）來模擬移動端設備CPU。
1在DevTools中，點擊 Performance 的 tab。
2確保 Screenshots checkbox 被選中
3點擊 Capture Settings（??）按鈕，DevTools會展示很多設置，來模擬各種狀況
4對於模擬CPU，選擇2x slowdown，於是Devtools就開始模擬兩倍低速CPU
5在DevTools中，點擊 Record 。這時候Devtools就開始錄制各種性能指標
6進行快速操作，點擊stop，處理數據，然後顯示性能報告
二、分析報告
FPS（frames per second）是用來分析動畫的一個主要性能指標。讓頁面效果能夠達到>=60fps(幀)/s的刷新頻率以避免出現卡頓。能保持在60的FPS的話，那麽用戶體驗就是不錯的。
為什麽是60fps?
我們的目標是保證頁面要有高於每秒60fps(幀)的刷新頻率，這和目前大多數顯示器的刷新率相吻合(60Hz)。如果網頁動畫能夠做到每秒60幀，就會跟顯示器同步刷新，達到最佳的視覺效果。這意味著，一秒之內進行60次重新渲染，每次重新渲染的時間不能超過16.66毫秒。
三、界面介紹
從上到下分別為4個區域
1：具體條，包含錄制，刷新頁面分析，清除結果等一系列操作
2：overview總覽圖，高度概括隨時間線的變動，包括FPS，CPU，NET
3：火焰圖，從不同的角度分析框選區域 。例如：Network，Frames, Interactions, Main等
4：總結區域：精確到毫秒級的分析，以及按調用層級，事件分類的整理
【Overview】
Overview 窗格包含以下三個圖表：
1、FPS。每秒幀數。綠色豎線越高，FPS 越高。 FPS 圖表上的紅色塊表示長時間幀，很可能會出現卡頓
2、CPU。 CPU 資源。此面積圖指示消耗 CPU 資源的事件類型
3、NET。每條彩色橫杠表示一種資源。橫杠越長，檢索資源所需的時間越長。 每個橫杠的淺色部分表示等待時間（從請求資源到第一個字節下載完成的時間）
可以放大顯示一部分記錄，以便簡化分析。使用 Overview 窗格可以放大顯示一部分記錄。 放大後，火焰圖會自動縮放以匹配同一部分
選擇部分後，可以使用 W、A、S 和 D 鍵調整您的選擇。 W 和 S 分別代表放大和縮小。 A 和 D 分別代表左移和右移
【火焰圖】
在火焰圖上看到一到三條垂直的虛線。藍線代表 DOMContentLoaded 事件。 綠線代表首次繪制的時間。 紅線代表 load 事件
在火焰圖中選擇事件時，Details 窗格會顯示與事件相關的其他信息
【總結區域】
藍色(Loading)：網絡通信和HTML解析
黃色(Scripting)：JavaScript執行
紫色(Rendering)：樣式計算和布局，即重排
綠色(Painting)：重繪
灰色(other)：其它事件花費的時間
白色(Idle)：空閑時間
Loading事件
|
事件 |
描述 |
|
Parse HTML |
瀏覽器執行HTML解析 |
|
Finish Loading |
網絡請求完畢事件 |
|
Receive Data |
請求的響應數據到達事件，如果響應數據很大（拆包），可能會多次觸發該事件 |
|
Receive Response |
響應頭報文到達時觸發 |
|
Send Request |
發送網絡請求時觸發 |
Scripting事件
|
事件 |
描述 |
|
Animation Frame Fired |
一個定義好的動畫幀發生並開始回調處理時觸發 |
|
Cancel Animation Frame |
取消一個動畫幀時觸發 |
|
GC Event |
垃圾回收時觸發 |
|
DOMContentLoaded |
當頁面中的DOM內容加載並解析完畢時觸發 |
|
Evaluate Script |
A script was evaluated. |
|
Event |
js事件 |
|
Function Call |
只有當瀏覽器進入到js引擎中時觸發 |
|
Install Timer |
創建計時器（調用setTimeout()和setInterval()）時觸發 |
|
Request Animation Frame |
A requestAnimationFrame() call scheduled a new frame |
|
Remove Timer |
當清除一個計時器時觸發 |
|
Time |
調用console.time()觸發 |
|
Time End |
調用console.timeEnd()觸發 |
|
Timer Fired |
定時器激活回調後觸發 |
|
XHR Ready State Change |
當一個異步請求為就緒狀態後觸發 |
|
XHR Load |
當一個異步請求完成加載後觸發 |
Rendering事件
|
事件 |
描述 |
|
Invalidate layout |
當DOM更改導致頁面布局失效時觸發 |
|
Layout |
頁面布局計算執行時觸發 |
|
Recalculate style |
Chrome重新計算元素樣式時觸發 |
|
Scroll |
內嵌的視窗滾動時觸發 |
Painting事件
|
事件 |
描述 |
|
Composite Layers |
Chrome的渲染引擎完成圖片層合並時觸發 |
|
Image Decode |
一個圖片資源完成解碼後觸發 |
|
Image Resize |
一個圖片被修改尺寸後觸發 |
|
Paint |
合並後的層被繪制到對應顯示區域後觸發 |
chrome-performance頁面性能分析使用教程