如何进行 web 性能监控，你的方法用对了吗？( 二 ) _性能监控

3. WebPageTestWebPageTest
给出性能测速结果和资源加载的瀑布图。

文章插图

4. Pingdomhttps://www.pingdom.com/
注意：Pingdom 不仅提供合成监控，也提供真实用户监控。

文章插图

这种监控方式的优缺点：
优点：
无侵入性。
简单快捷。
缺点：
不是真实的用户访问情况，只是模拟的。
没法考虑到登录的情况，对于需要登录的页面就无法监控到。
二、真实用户监控真实用户监控是一种被动监控技术，是一种应用服务，被监控的 web 应用通过 sdk 等方式接入该服务，将真实的用户访问、交互等性能指标数据收集上报、通过数据清洗加工后形成性能分析报表。例如 alloydata、oneapm、aegis、monitor 等等。

文章插图

1. oneapmhttps://www.oneapm.com/bi/feature.html
功能包括：大盘数据、特征统计、慢加载追踪、访问页面、脚本错误、AJAX、组合分析、报表、告警等等。

文章插图

2. Datadoghttps://www.datadoghq.com/rum/

文章插图

3. FrontJshttps://www.frontjs.com/
功能包括：访问性能、异常监控、报表、趋势等等。

文章插图

这种监控方式的优缺点：
优点：
是真实用户访问情况。
可以观察历史性能趋势。
有一些额外的功能：报表推送、监控告警等等。
缺点：
有侵入性，会一定程度上响应 web 性能。
performance 分析在讲如何监控之前，先来看看浏览器提供的 performance api，这也是监控数据的来源。
performance 提供高精度的时间戳，精度可达纳秒级别，且不会随操作系统时间设置的影响。目前市场上的支持情况：主流浏览器都支持，大可放心使用。

文章插图

基本属性

文章插图

performance.navigation: 页面是加载还是刷新、发生了多少次重定向

文章插图

performance.timing: 页面加载的各阶段时长

文章插图

各阶段的含义：

文章插图

performance.memory：基本内存使用情况，Chrome 添加的一个非标准扩展

文章插图

performance.timeorigin: 性能测量开始时的时间的高精度时间戳

文章插图

基本方法performance.getEntries()
通过这个方法可以获取到所有的 performance 实体对象，通过 getEntriesByName 和 getEntriesByType 方法可对所有的 performance 实体对象进行过滤，返回特定类型的实体。
mark 方法和 measure 方法的结合可打点计时，获取某个函数执行耗时等。

文章插图

performance.getEntriesByName()
performance.getEntriesByType()
performance.mark()
performance.clearMarks()
performance.measure()
performance.clearMeasures()
performance.now()
...
提供的 APIperformance 也提供了多种 API，不同的 API 之间可能会有重叠的部分。
1. PerformanceObserver API用于检测性能的事件，这个 API 利用了观察者模式。
获取资源信息