一、模擬移動設備的CPU
移動設備的CPU一般比台式機和筆記本弱很多。當你想分析頁面的時候，可以用CPU控制器（CPU Throttling）來模擬移動端設備CPU。
- 在DevTools中，點擊 Performance 的 tab。
- 確保 Screenshots checkbox 被選中
- 點擊 Capture Settings（⚙️）按鈕，DevTools會展示很多設置，來模擬各種狀況
- 對於模擬CPU，選擇2x slowdown，於是Devtools就開始模擬兩倍低速CPU
- 在DevTools中，點擊 Record 。這時候Devtools就開始錄制各種性能指標
- 進行快速操作，點擊stop，處理數據，然后顯示性能報告
二、分析報告
FPS（frames per second）是用來分析動畫的一個主要性能指標。讓頁面效果能夠達到>=60fps(幀)/s的刷新頻率以避免出現卡頓。
為什么是60fps?
我們的目標是保證頁面要有高於每秒60fps(幀)的刷新頻率，這和目前大多數顯示器的刷新率相吻合(60Hz)。如果網頁動畫能夠做到每秒60幀，就會跟顯示器同步刷新，達到最佳的視覺效果。這意味着，一秒之內進行60次重新渲染，每次重新渲染的時間不能超過16.66毫秒。
藍色(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 | 合並后的層被繪制到對應顯示區域后觸發 |