web性能监控
性能监控的指标
- 页面访问速度
- 首屏渲染 first paint (FP) 。ps: 白屏时间
- 首屏有内容渲染 first contentful paint (FCP)
- 可交互时长（到达可以交互的时长）
- 页面稳定性
- js报错统计
- 资源加载错误统计
- 外部服务调用
- CGI 耗时（公共网关接口）
- CGI 成功率
- CDN 资源耗时
工具
合成监控
合成监控是采用 web 浏览器模拟器来加载网页，通过模拟终端用户可能的操作来采集对应的性能指标，最后输出一个网站性能报告。
- Lighthouse
- PageSpeed
- WebPageTest
合成监控方式的优缺点：
- 优点：
无侵入性。
简单快捷。 - 缺点：
不是真实的用户访问情况，只是模拟的。
没法考虑到登录的情况，对于需要登录的页面就无法监控到。
真实用户监控
真实用户监控是一种被动监控技术，是一种应用服务，被监控的 web 应用通过 sdk 等方式接入该服务，将真实的用户访问、交互等性能指标数据收集上报、通过数据清洗加工后形成性能分析报表。例如 FrontJs、oneapm、Datadog 等。
- oneapm
- Datadog
优缺点
- 优点：
是真实用户访问情况。
可以观察历史性能趋势。
有一些额外的功能：报表推送、监控告警等等。 - 缺点：
有侵入性，会一定程度上响应 web 性能。
前端实现方式
- 获取用户信息设备
- Navigator.userAgent
- 获取性能数据
- 插入script节点
- H5 的 performance API
- 获取首屏时间
- lighthouse 中使用的是 chrome 渲染过程
- 可利用 Chrome DevTools Protocol 拿到页面布局节点数目
- MutationObserver
- 异常上报
- js error： 监听 window.onerror 事件
- promise reject 的异常： 监听 unhandledrejection 事件
- 资源加载失败：window.addEventListener(‘error’)
- 网络请求失败：重写 window.XMLHttpRequest 和 window.fetch
- iframe异常：重写 window.frames[0].onerror
- 控制台报错：重写window.console.error
微信小程序性能监控指标（待补充）
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1249118795@qq.com