本文摘自掘金小冊子《前端性能優化原理與實踐》
一、可視化監測
1、chrome工具Performance 面板
CPU 圖標和 Summary 圖都是按照“類型”給我們提供性能信息，而 Main 火焰圖則將粒度細化到了每一個函數的調用。到底是從哪個過程開始出問題、是哪個函數拖了后腿、又是哪個事件觸發了這個函數，這些具體的、細致的問題都將在 Main 火焰圖中得到解答。
缺點：Performance 無疑可以為我們提供很多有價值的信息，但它的展示作用大於分析作用。它要求使用者對工具本身及其所展示的信息有充分的理解，能夠將晦澀的數據“翻譯”成具體的性能問題
官方文檔：https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference
2、LightHouse工具或Audits 面板
根據評分細項給出改進意見，逐條改進
使用 Lighthouse 審查網絡應用：https://developers.google.com/web/tools/lighthouse/?hl=zh-cn
二、可編程性能上報
1、W3C性能API
window.performance 對象time屬性可以查看關鍵點的時間戳，計算性能時間指標
Performance|web API接口文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/Performance