⚡ 30 秒速记
- 采集围绕错误、性能与关键业务流程
- 标准指标和业务可用时间分别定义
- 页面、版本、请求标识帮助关联证据
- 采样、去重、脱敏控制开销与风险
- 上报成功不等于能定位，要有聚合和有效告警
前端监控要让线上现象能被还原，而不只是把异常堆到服务端。 错误需要版本与位置，性能需要设备和页面条件，业务失败还要能关联请求过程。标准浏览器指标尽量用现成定义，单页应用的业务就绪时间另设明确标记。采集代码本身也会消耗资源，要采样、去重和脱敏，再把问题聚合成能判断影响范围的告警。
版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。
# 一、性能优化方法论
首屏时间可以拆分为白屏时间、数据接口响应时间、图片加载资源等
# 二、指标采集：首屏时间指标采集具体办法
# 手动采集办法及优缺点：
- 所谓手动采集，一般是通过埋点的方式进行， 比如在页面开始位置打上
FMP.Start()，在首屏结束位置打上FMP.End()，利用FMP.End()-FMP.Start()获取到首屏时间。 - 手动采集的统计结果并不精确，因为依赖于人，每个人对首屏的理解有偏差，经常打错或者忘记打点。
# 自动化采集优势及办法
所谓自动化采集，即引入一段通用的代码来做首屏时间自动化采集，引入过程中，除了必要的配置不需要做其他事情。
自动化采集的好处是独立性更强，接入过程更自动化。具体的自动化采集代码，可以由一个公共团队来开发，试点后，推广到各个业务团队。而且统计结果更标准化，同一段统计代码，标准更统一，业务侧同学也更认可这个统计结果。
当然，它也有缺点，最明显的是，有些个性化需求无法满足，毕竟在工作中，总会有一些特殊业务场景。所以，采用自动化采集方案必须做一些取舍。
# 单页面（SPA）应用业务下的采集办法
SPA 页面因为无法基于 DOMContentLoaded 做首屏指标采集，可以使用 MutationObserver 采集首屏时间。
MutationObserver接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是 DOM3 Events 规范的一部分。
简单来说， 使用 MutationObserver 能监控页面信息的变化，当页面 body 变化最剧烈的时候，我们拿到的时间数据，就是首屏时间。
首先，在用户进入页面时，我们可以使用 MutationObserver 监控 DOM 元素 （Document Object Model，文档对象模型）。当 DOM 元素发生变化时，程序会标记变化的元素，记录时间点和分数，存储到数组中。数据的格式类似于 [200ms,18.5]。
为了提升计算的效率，我们认为首屏指标采集到某些条件时，首屏渲染已经结束，我们需要考虑首屏采集终止的条件，即计算时间超过 30 秒还没有结束；计算了 4 轮且 1 秒内分数不再变化；计算了 9 次且分数不再变化。
