前端性能監控工具

本文摘自掘金小冊子《前端性能優化原理與實踐》

1、可視化監測

一、chrome工具Performance 面板

CPU 圖標和 Summary 圖都是按照「類型」給咱們提供性能信息，而 Main 火焰圖則將粒度細化到了每個函數的調用。究竟是從哪一個過程開始出問題、是哪一個函數拖了後腿、又是哪一個事件觸發了這個函數，這些具體的、細緻的問題都將在 Main 火焰圖中獲得解答。

缺點：Performance 無疑能夠爲咱們提供不少有價值的信息，但它的展現做用大於分析做用。它要求使用者對工具自己及其所展現的信息有充分的理解，可以將晦澀的數據「翻譯」成具體的性能問題

官方文檔：https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference

 

二、LightHouse工具或Audits 面板

根據評分細項給出改進意見，逐條改進

使用 Lighthouse 審查網絡應用：https://developers.google.com/web/tools/lighthouse/?hl=zh-cn

2、可編程性能上報

一、W3C性能API

window.performance 對象time屬性能夠查看關鍵點的時間戳，計算性能時間指標

 

Performance|web API接口文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/Performance