chrome 的performance用來分析性能優(yōu)化性能非常好用，下面以一個頁面來舉例
性能分析
性能分析最好使用隱私無痕模式，以保證干凈的環(huán)境下，避免chrome插件對性能分析結果的影響
- Performance 性能面板 ：可看到白屏時間，F(xiàn)PS，資源加載曲線，內存變化
- Memory 內存面板，記錄某個時刻的頁面內存情況，用于分析內存泄露
詳細拆分
overview- FPS
頁面每秒幀數(shù)。用來分析動畫的性能指標。fps=60性能很好
FPS（frames per second）是用來分析動畫的一個主要性能指標。讓頁面效果能夠達到>=60fps(幀)/s的刷新頻率以避免出現(xiàn)卡頓。能保持在60的FPS的話，那么用戶體驗就是不錯的。
為什么是60fps?
我們的目標是保證頁面要有高于每秒60fps(幀)的刷新頻率，這和目前大多數(shù)顯示器的刷新率相吻合(60Hz)。如果網(wǎng)頁動畫能夠做到每秒60幀，就會跟顯示器同步刷新，達到最佳的視覺效果。這意味著，一秒之內進行60次重新渲染，每次重新渲染的時間不能超過16.66毫秒。
fps<24 會讓用戶感覺到卡頓，人眼的識別主要是24幀
FPS chrome最新版需要開啟
開啟后可以看到fps
紅色塊標識長時間幀，很容易遇到卡幀，有紅色的地方就是這塊有問題
overview-main火焰圖
Main中展示的是火焰圖，也就是函數(shù)調用的堆?；鹧鎴D
x軸表示時間，最上面的第一條就是事件觸發(fā)的地方，直到結束，這條線是最長的
y軸表示調用的函數(shù)，函數(shù)中還包含依次調用的函數(shù)，越到下面數(shù)量越少（瀑布）
不同顏色代表不同的事件類型，以下對常見的事件類型進行區(qū)分
Parse HTML（藍色）: chrome 進行HTML解析
Event Script（橙色）: Javascript事件（例如 mousedown）
Layout（粉色）: 樣式計算和布局，即重排
Recalculate style（粉色）: 樣式計算和布局，即重排
Paint（綠色）: 合成的圖層被繪制到顯示畫面的一個區(qū)域
Composite（綠色）: Chrome的渲染引擎合成了圖像層文章來源：http://www.zghlxwxcb.cn/news/detail-426842.html
識別問題
在火焰圖里有很多的task，如果是耗時長的task ，右上角就有紅色三角號，這是chrome自動識別的有問題的部分，點擊任務，就可以在下面統(tǒng)計看到具體信息文章來源地址http://www.zghlxwxcb.cn/news/detail-426842.html
到了這里，關于chrome Dev Tools 性能分析 performance的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
