1、模擬移動設備的CPU瀏覽器
移動設備的CPU通常比臺式機和筆記本弱不少。當你想分析頁面的時候，能夠用CPU控制器（CPU Throttling）來模擬移動端設備CPU。網絡
- 在DevTools中，點擊 Performance 的 tab。
- 確保 Screenshots checkbox 被選中
- 點擊 Capture Settings（⚙️）按鈕，DevTools會展現不少設置，來模擬各類情況
- 對於模擬CPU，選擇2x slowdown，因而Devtools就開始模擬兩倍低速CPU
- 在DevTools中，點擊 Record 。這時候Devtools就開始錄製各類性能指標
- 進行快速操做，點擊stop，處理數據，而後顯示性能報告
2、分析報告異步
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 | 合併後的層被繪製到對應顯示區域後觸發 |