前端性能监控工具

本文摘自掘金小册子《前端性能优化原理与实践》

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