chrome 的performance用來分析性能優化性能非常好用，下面以一個頁面來舉例
性能分析
性能分析最好使用隱私無痕模式，以保證乾淨的環境下，避免chrome插件對性能分析結果的影響
- Performance 性能面板 ：可看到白屏時間，FPS，資源加載曲線，內存變化
- Memory 內存面板，記錄某個時刻的頁面內存情況，用於分析內存泄露
詳細拆分
overview- FPS
頁面每秒幀數。用來分析動畫的性能指標。fps=60性能很好
FPS（frames per second）是用來分析動畫的一個主要性能指標。讓頁面效果能夠達到>=60fps(幀)/s的刷新頻率以避免出現卡頓。能保持在60的FPS的話，那麼用戶體驗就是不錯的。
爲什麼是60fps?
我們的目標是保證頁面要有高於每秒60fps(幀)的刷新頻率，這和目前大多數顯示器的刷新率相吻合(60Hz)。如果網頁動畫能夠做到每秒60幀，就會跟顯示器同步刷新，達到最佳的視覺效果。這意味着，一秒之內進行60次重新渲染，每次重新渲染的時間不能超過16.66毫秒。
fps<24 會讓用戶感覺到卡頓，人眼的識別主要是24幀
FPS chrome最新版需要開啓
開啓後可以看到fps
紅色塊標識長時間幀，很容易遇到卡幀，有紅色的地方就是這塊有問題
overview-main火焰圖
Main中展示的是火焰圖，也就是函數調用的堆棧火焰圖
x軸表示時間，最上面的第一條就是事件觸發的地方，直到結束，這條線是最長的
y軸表示調用的函數，函數中還包含依次調用的函數，越到下面數量越少（瀑布）
不同顏色代表不同的事件類型，以下對常見的事件類型進行區分
Parse HTML（藍色）: chrome 進行HTML解析
Event Script（橙色）: Javascript事件（例如 mousedown）
Layout（粉色）: 樣式計算和佈局，即重排
Recalculate style（粉色）: 樣式計算和佈局，即重排
Paint（綠色）: 合成的圖層被繪製到顯示畫面的一個區域
Composite（綠色）: Chrome的渲染引擎合成了圖像層
識別問題
在火焰圖裏有很多的task，如果是耗時長的task ，右上角就有紅色三角號，這是chrome自動識別的有問題的部分，點擊任務，就可以在下面統計看到具體信息
