運行時性能表現（runtime performance）指的是當你的頁面在瀏覽器運行時的性能表現，而不是在下載頁面的時候的表現。這篇指南將會告訴你怎麼用Chrome DevTools Performance功能去分析運行時性能表現。在RAIL性能評估模型下，你能夠在這篇指南中能夠學到怎麼去用這個performance功能去分析Response, Animation, 以及 Idle 這三個性能指標。瀏覽器
1、模擬移動設備的CPU網絡
移動設備的CPU通常比臺式機和筆記本弱不少。當你想分析頁面的時候，能夠用CPU控制器（CPU Throttling）來模擬移動端設備CPU。異步
1在DevTools中，點擊 Performance 的 tab。佈局
2確保 Screenshots checkbox 被選中性能
3點擊 Capture Settings（⚙️）按鈕，DevTools會展現不少設置，來模擬各類情況動畫
4對於模擬CPU，選擇2x slowdown，因而Devtools就開始模擬兩倍低速CPUlua
5在DevTools中，點擊 Record 。這時候Devtools就開始錄製各類性能指標spa
6進行快速操做，點擊stop，處理數據，而後顯示性能報告code
2、分析報告orm
FPS（frames per second）是用來分析動畫的一個主要性能指標。讓頁面效果可以達到>=60fps(幀)/s的刷新頻率以免出現卡頓。能保持在60的FPS的話，那麼用戶體驗就是不錯的。
爲何是60fps?
咱們的目標是保證頁面要有高於每秒60fps(幀)的刷新頻率，這和目前大多數顯示器的刷新率相吻合(60Hz)。若是網頁動畫可以作到每秒60幀，就會跟顯示器同步刷新，達到最佳的視覺效果。這意味着，一秒以內進行60次從新渲染，每次從新渲染的時間不能超過16.66毫秒。
3、界面介紹
從上到下分別爲4個區域
1：具體條，包含錄製，刷新頁面分析，清除結果等一系列操做
2：overview總覽圖，高度歸納隨時間線的變更，包括FPS，CPU，NET
3：火焰圖，從不一樣的角度分析框選區域 。例如：Network，Frames, Interactions, Main等
4：總結區域：精確到毫秒級的分析，以及按調用層級，事件分類的整理
【Overview】
Overview 窗格包含如下三個圖表：
一、FPS。每秒幀數。綠色豎線越高，FPS 越高。 FPS 圖表上的紅色塊表示長時間幀，極可能會出現卡頓
二、CPU。 CPU 資源。此面積圖指示消耗 CPU 資源的事件類型
三、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 |
合併後的層被繪製到對應顯示區域後觸發 |