使用chrome performance 查看頁面性能

chrome瀏覽器提供的performance是常用來查看網頁性能的工具。

使用方法

• 點擊面板左上方圓形按鈕開始記錄，然后操作頁面，一段時間之后在面板上點擊停止，即可得到這段操作過程的記錄結果。
• 點擊面板上左上方刷新按鍵，可以重新加載頁面並獲得該過程記錄結果。
• 點擊面板左上方禁止符號，可以清除記錄結果。

縮略圖版塊

縮略圖中一共分為5行，從上到下依次是：

1. FPS，表示每一秒的幀數，用來衡量頁面動畫的性能指標。fps圖中綠色柱狀越高表示體驗越好。若出現紅色長條則表示在該時間端出現長幀，可能影響用戶體驗。讓頁面效果能夠達到>=60fps(幀)/s的刷新頻率以避免出現卡頓。能保持在60的FPS的話，那么用戶體驗就是不錯的
2. CPU，表示cpu的使用情況，其中顏色含義和底下的Summary模塊中相同。從該行中顏色塊的跨越時長可以分析哪類事件消耗的時間較長，從而找到性能瓶頸。
3. NET，每一個顏色條表示加載一種文件。藍色(Loading)：網絡通信和HTML解析。黃色(Scripting)：JavaScript執行。紫色(Rendering)：樣式計算和布局，即重排。綠色(Painting)：重繪。灰色(other)：其它事件花費的時間。白色(Idle)：空閑時間
4. 縮略圖，對應每一時刻頁面的顯示情況。通過勾選上方 Screenshots 來控制顯示或隱藏。
5. HEAP，表示堆內存使用情況。可通過勾選上訪 Menory 來控制顯示或隱藏。