前端&&web 性能监控

看这个，这个，参考资料，很详细，就不细细抄啦~~
参考资料：
https://mp.weixin.qq.com/s/7ycHJtq81icA-BtY0WEzXw

性能指标

google 开发者提出了一种 RAIL 模型来衡量应用性能，即：

• Response

100ms 内响应用户输入

• Animation

动画或者滚动需在 10ms 内产生下一帧

• Idle

最大化空闲时间

• Load

页面加载时长不超过 5 秒

分别代表着 web 应用生命周期的四个不同方面。并指出的最好性能指标。

监控分类

web 性能监控可分为两类，一类是合成监控（Synthetic Monitoring，SYN），另一类是真实用户监控（Real User Monitoring，RUM）

合成监控（Synthetic Monitoring，SYN）

合成监控是采用 web 浏览器模拟器来加载网页，通过模拟终端用户可能的操作来采集对应的性能指标，最后输出一个网站性能报告。例如：Lighthouse、PageSpeed、WebPageTest、Pingdom、PhantomJS 等。

Lighthouse

Lighthouse 是 google 一个开源的自动化工具，运行 Lighthouse 的方式有两种：一种是作为 Chrome 扩展程序运行；另一种作为命令行工具运行。Chrome 扩展程序提供了一个对用户更友好的界面，方便读取报告。通过命令行工具可以将 Lighthouse 集成到持续集成系统。
展示了白屏、首屏、可交互时间等性能指标和 SEO、PWA 等。
腾讯文档移动端官网首页测速结果：

合成监控方式的优缺点：

优点：

• 无侵入性。
• 简单快捷。

缺点：

• 不是真实的用户访问情况，只是模拟的。
• 没法考虑到登录的情况，对于需要登录的页面就无法监控到。

真实用户监控（Real User Monitoring，RUM）

真实用户监控是一种被动监控技术，是一种应用服务，被监控的 web 应用通过 sdk 等方式接入该服务，将真实的用户访问、交互等性能指标数据收集上报、通过数据清洗加工后形成性能分析报表。例如 FrontJs、oneapm、Datadog 等。

oneapm

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