作為一名前端開發者，有時候會遇到開發的頁面慢或者卡頓的情況，想解決但又無處下手，這時候我們就可以使用Chrome devtools 的 Performance 面板工具來分析造成的原因。
（本文會忽略一些過於基礎的知識和細節）
簡介
Performance 即運行時性能表現
它記錄頁面運行一段時間內的性能情況，諸如fps，cpu，network，memory等，以及哪些部分佔用了這些資源，你可以通過找到佔用這些資源的代碼來分析瓶頸所在
在開始之前你也可以看看前面的一些內容
Performance 面板
Performance面板如下：
使用
- 使用隱身窗口，打開項目（比如在線測試DEMO）
- 點擊錄製按鈕（黑點），開始記錄此段時間內頁面運行性能
- 點擊stop停止
演示
面板功能分析
如下劃分成4個區域
區域1：控制面板
- Screenshots
截圖：默認勾選，每一幀都會截圖。關閉後區域二下面部分會去除（下圖紅框標記那裡）
Screenshots
通過在時間線上移動觀察頁面的變化
- Memory
內存消耗記錄：勾選後可以看到各種內存消耗曲線
【以下配置都是用來模擬手機、慢網絡下使用的，無需可以跳過】
- Disable javaScript samples
關閉javaScript樣本：減少在手機運行時的開銷，模擬手機運行時勾選
- Network
網絡模擬：可以模擬在3G,4G等網絡條件下運行頁面
- Enable advanced paint instrumentation (slow)
記錄渲染事件的細節：選擇frames中的一塊，可以看到區域四多了個Layers
Layers
- CPU
CPU限制：主要為了模擬底CPU下運行性能
區域2：概覽面板（overview）
區域2
1 . FPS
FPS：每秒幀數，對於動畫而言標準是保持在60FPS
☆ 優化
綠色越高越好，出現紅色則表示FPS低（這就是你為啥覺得頁面卡頓了），你可以在區域三Frames中看到具體的FPS值（見下面第二圖）。
☆測試
多點幾次DEMO的 ADD 10 按鈕，直到感覺畫面不流暢為止，開啟分析記錄，如下
FPS低
點擊方塊可以看到57.1ms內共有18fps
2 . CPU
CPU: 處理各個任務花費的時間，選擇一段CPU統計可以在區域四的Summary看到統計表格
Summary統計
- Scripting 腳本
- Rendering 渲染
- Painting 繪製
- Loading 加載
- ldle 閒置
☆ 優化
比重佔的大的顏色可能有問題，如上圖中的紫色部分Rendering，表示渲染耗費時間久
3 . NET
NET：各個請求花費時間
這塊可以再network裡看，更清晰些
NET
今天的內容就到這裡了，下篇介紹區域三和區域四，關注一下不迷路哦~
html css html css javascript html javascript css javascript css
閱讀更多 全棧前端 的文章
