一、衡量網頁性能的重要指標
- 首次繪製（First Paint）: 參考@MDN 的說法，指瀏覽器將第一個像素渲染到屏幕上所需的時間
- 首次有內容繪製（First Contentful Paint）: 網頁上出現任意有內容的東西需要的時間
- 首次有意義繪製（First Meaningful Paint): 系統的主要內容出現在頁面上所需的時間
- 首次可交互時間（Time To Interactive): 網站可正常使用前，用戶所需要等待的時間
- 首次輸入延遲（First Input Dela）：從用戶首次與頁面交互，到網站能夠響應該交互的時間
- CPU 耗時
- 內存使用情況
- 重排(reflow)和重繪(repaint)的頻率
二、利用工具分析系統的性能
2.1 常用的性能分析工具
LightHouse
- 來源: 開源的自動化工具
- github倉庫地址: GoogleChrome@lighthouse
- 優勢: 對於測試性能指標中的時間相關指標很有效（首次繪製時間、首次有內容繪製等）
WebPageTest
- 來源: 開源的自動化工具
- github倉庫地址: WebpageTest
- 優勢:操作簡單，輸入相關URL即可進行分析測試，除了可分析時間相關性能指標外，還可以對CPU空閒時間等進行測試
Chrome_Performance
- 來源: Chrome-開發者工具
- 優勢: 對系統性能分析的指標較爲全面，包括時間相關(首次繪製FP等)性能指標、JS內存耗時、重排重繪出現的地方以及各個資源佔用內存情況、消耗的時間進行評估。
Chrome-Memory
- 來源: Chrome-開發者工具
- 優勢: 專門針對JS內存進行分析，可以用來輔助分析系統中是否存在內存泄漏的情況
以上工具的用法在這裏不一一贅述，本文中重點一起探索Chrome-Performance的用法
2.2 使用Performance分析系統性能
1) 使用前的注意事項
• 停用擴展程序，以隱身模式打開 Chrome 窗口
• 停用瀏覽器緩存。從 DevTools 的 Settings 面板停用瀏覽器的緩存。
• 避免不必要的操作。避免與想要分析的內容無關聯的操作；例如，如果想要記錄點擊 Login 按鈕後發生的事件，不要進行滾動頁面、加載圖像等操作。
• 錄製時間不宜過長(時間過長·，錄製結果反而不容易分析)
2) 使用Performance分析系統的性能
第一步: 選擇需要測試的頁面，進行Performance錄製
第二步: 分析錄製結果
上半部分參數項概要:
FPS: 每秒幀數，可理解爲刷新率
• 結果圖中的綠色豎線用來表示FPS 值的高低；綠色線上方的紅色塊表示耗時長的動畫幀(會導致頁面卡頓)
• 該指標主要用來衡量動畫的性能(PS:頁面靜止並無其他動畫FPS值很低是正常現象)
• 衡量標準: 60FPS爲最佳；最低值爲30FPS
• FPS並非越高越好：FPS越高，則對顯卡的處理能力要求越高
CPU： CPU資源使用情況
• CPU圖表中的顏色與分析結果底部的“Summary”中的顏色代表項相對應。
• CPU的結果圖中若充滿顏色，說明在性能分析錄製過程中，CPU已負載
NET：主要展示了網絡請求的先後順序以及各自的請求耗時，可以被 Network 面板完美替代
HEAP：記錄了系統運行過程中JS內存的變化情況
中間部分參數項概要:
Network：主要展示網絡請求的先後順序以及各自的請求耗時
Frames：記錄對應時間上的幀,鼠標移動到綠色條狀圖上即可查看
Interactions：記錄錄製過程中頁面發生的用戶交互
Main： 記錄主線程的活動
• 結果圖上每個柱狀條代表一個事件，柱狀條越寬說明事件耗時越久
• 右上角標註紅色的柱狀條爲耗時過長的事件，選中紅色提示即在Summmary中看到具體提示，有的提示能直接定位到代碼源頭
• 樣式繪製問題也會在Main結果圖中展示，例如重排重繪
下半部分參數概要:
圖示中折線圖部分是JS內存情況的記錄，錄製前只要勾選了memory選項，即可在結果中看到此項錄製結果。可在Chrome開發者工具的Memory項中專門測試；
Summary則是對於系統資源耗時的一個統計:
• Rendering(頁面渲染，樣式計算和佈局，即重排）
• Loading(網絡通信和HTML解析)
• Scripting(JS腳本)
• Painting(樣式繪製）
• system(系統耗時)
• Idle(空閒時間)
本文回顧:
優化Web性能，首先要了解衡量系統性能的指標，除了本文中總結的指標外，還可以根據項目自身情況制定相關的指標；其次，可以藉助性能分析工具來分析系統的性能。Chrome開發者工具中的Performance就提供了很好的參數項來測試系統的性能。