如何收集性能数据？｜美团前端面经解析

60 秒回答模板

前端性能数据一般分实验室测试和真实用户监控。线上 RUM 可以用 PerformanceObserver 采集 LCP、CLS、INP、longtask、event、resource 等条目，用 performance.getEntriesByType 读取 navigation、paint、resource，再补充路由、设备、网络、版本、用户分桶和业务场景。上报时要抽样、去重、聚合异常、控制 payload，优先用 sendBeacon 或 fetch keepalive，并在页面隐藏、路由切换或空闲时机发送。采集不是越多越好，要保证指标定义稳定、维度可分析、对页面性能影响可控。

考点 核心机制与工程取舍

难度 中高频面试题

回答目标 按定义、机制、场景讲清楚

深入解析

先分数据类型

实验室数据来自 Lighthouse、WebPageTest、CI 环境，适合回归对比但不代表真实用户。RUM 来自线上真实设备、真实网络和真实页面路径，适合发现地域、机型、网络和版本差异。

浏览器原生能力

Navigation Timing 能拆文档请求链路，Resource Timing 能看静态资源和接口耗时，Paint Timing 能看 FP/FCP，PerformanceObserver 能增量监听 LCP、CLS、longtask、event 等条目。

指标要带上下文

只有一个耗时数字很难分析。上报应带页面路由、版本号、设备类型、网络类型、浏览器、地区、是否命中缓存、用户分桶、登录状态和关键业务参数，但要避免上传隐私内容。

单页应用特殊处理

SPA 首次加载可以用原生 navigation 指标，路由切换要自定义开始和结束点，例如路由开始、数据返回、关键内容渲染完成。否则只采首页，无法评价后续页面体验。

上报策略

上报要抽样、限流、合并、去重和降级。sendBeacon 适合页面卸载或隐藏时发送，fetch keepalive 可作为补充。大 payload、同步 XHR 和高频上报都会反过来伤害性能。

数据质量治理

要处理异常值、重复上报、后台标签页、缓存命中、机器人流量、采样率变化和版本维度。看 p75、p95、分位数和趋势，比只看平均值更可靠。

易错点

只说用 Lighthouse，不区分实验室数据和真实用户 RUM。
只采耗时数值，不带路由、版本、设备、网络等分析维度。
在页面卸载时用同步请求上报，反而阻塞用户离开。
只看平均值，不看分位数、样本量、采样率和异常值处理。

面试官追问

PerformanceObserver 相比直接 getEntries 有什么优势？

它可以增量监听后续产生的性能条目，适合 LCP、CLS、longtask、event 这类运行中变化的指标。getEntries 更适合读取已有条目快照。

SPA 路由性能怎么统计？

需要自定义路由切换的开始点和结束点，例如 routeChangeStart、数据请求完成、关键组件渲染完成，并按路由维度上报，不能只依赖 navigation timing。

为什么性能数据常看 p75 或 p95？

平均值容易被极端值影响，也掩盖尾部用户体验。p75 常用于总体体验判断，p95 更能发现慢设备、弱网和长尾问题。

上报会影响性能怎么办？

控制采样率和 payload，异步缓冲，使用 sendBeacon 或空闲时机发送，避免同步阻塞和高频上报，并为采集脚本本身设置降级开关。