前端性能监控

---

性能监控

前端性能监控的两种主要技术方案：

• 合成监控(Synthetic Monitoring，SYN)
• 真实用户监控(Real User Monitoring，RUM)

合成监控

什么叫合成监控？就是在一个模拟场景里，去提交一个需要做性能审计的页面，通过一系列的工具、规则去运行你的页面，提取一些性能指标，得出一个审计报告。

合成监控中最近比较流行的是 Google 的 Lighthouse

合成监控的优缺点：

• 实现简单，解决方案成熟
• 能采集到更丰富的数据，如硬件指标或者瀑布图
• 不影响真实用户的访问性能
• 可以提供页面加载幻灯片(逐帧截图)等可视化分析途径

缺点：

• 合成条件配置复杂，无法还原真实场景
• 登录等场景需要额外解决
• 单词运行数据不够稳定
• 数据量较小，无法发挥更大的价值

真实用户监控

所谓真实用户监控，就是用户在我们的页面上访问，访问之后就会产生各种各样的性能指标，我们在用户访问结束的时候，把这些性能指标上传到我们的日志服务器上，进行数据的提取清洗加工，最后在我们的监控平台上进行展示的一个过程。

真实用户监控的优缺点：

• 无需配置模拟条件，完全还原真是场景
• 不存在登录等需要额外解决的场景
• 数据样本足够大，可以减少统计误差
• 性能数据可与其他关联产生更大的价值

缺点：

• 一定程度上真实用户的访问性能及流量损耗
• 无法采集硬件相关的指标
• 受传输限制无法采集完整的资源加载瀑布图
• 无法可视化展示页面加载过程

对比

真实用户性能数据采集方案

关注四个点：

• 使用标准的API
• 定义合适的指标
• 采集正确的数据
• 上报关联的纬度

1.使用标准的API performance API

2.常见的性能指标定义

• 页面加载时长 (Page Load Time, PLT)
• 首屏加载时长 (Above the Fold Time, AFT)
• DOM Ready 时长
• DOM Complete 时长
• DOM Interactive 时长
• 首字节等待时长 (Time to First Byte, TTFB)
• 首次渲染时长 (First Pain)
• 首次内容渲染时长 (First Contentful Pain)
• 首次有效渲染时长 (First Meaningful Pain)
• 开始渲染 (Start render)

3.采集正确的数据 RUM 性能模型 - 见图示

4.上报关联的纬度

参考

https://mp.weixin.qq.com/s/pqFhhb5u6w7gmUutilH5xQ