Performance API 埋点关键在于将原生时间数据与业务场景对齐，如首屏、交互、跳转等时刻精准打点并携带上下文；核心指标需结合框架生命周期（如 onMounted、router.afterEach）校准，用 PerformanceObserver 监听 LCP 并记录元素信息，通过 navigation entry 提取 TTFB/DOM 耗时，绑定路由 meta 和事件 mark/meausre 构建业务链路，上报采用批量、节流、beacon 等策略保障性能，并可识别刷量行为。
直接用 Performance API 做前端性能埋点，关键不是“测出数字”，而是把浏览器原生时间数据和真实业务场景对齐——比如用户看到内容、完成交互、页面跳转这些时刻，必须能精准打点并带上上下文。
核心性能指标怎么取才靠谱
Performance API 返回的是原始时间戳，真正有用的是差值和业务含义：
-
首屏时间（FCP）：用
performance.getEntriesByName('first-contentful-paint')[0]?.startTime获取，但要注意 Vue/React 应用常依赖异步数据或组件懒加载，FCP 可能早于内容实际可用。建议在onMounted或router.afterEach后手动打点标记“业务首屏完成” -
最大内容绘制（LCP）：用
PerformanceObserver监听largest-contentful-paint类型，捕获渲染时间，并记录对应元素的tagName和url（如图片地址），方便定位拖慢首屏的具体资源 -
页面完全加载（Load）：监听
window.addEventListener('load')，同时用performance.timing.loadEventEnd - performance.timing.navigationStart计算总耗时；对比两者可发现 JS 执行阻塞或资源加载异常 -
TTFB / DOM 解析耗时：从
performance.getEntriesByType('navigation')[0]中提取responseStart - requestStart和domContentLoadedEventEnd - startTime，用于识别服务端响应慢或前端解析卡顿
怎么和 Vue/React 行为自然绑定
纯 Performance 数据没有业务语义，必须注入框架上下文才能分析谁触发了慢体验：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 在路由配置中加
meta: { pageType: 'detail', module: 'order' }，上报时一并携带，让性能数据带模块、页面类型等标签，后续可按业务维度聚合分析 - 用户点击按钮后，在事件回调里立刻调用
performance.mark('btn_submit_start')；提交成功或失败后再打mark('btn_submit_end')并measure，形成完整操作链路 - 发生
unhandledrejection或error时，立即采集当前导航的performance.getEntriesByType('navigation')[0]，判断是否因资源加载失败导致白屏或卡顿
上报要克制，别让监控拖慢页面
高频打点 + 实时发送 = 自己制造性能问题：
立即学习“前端免费学习笔记（深入）”；
- 用
queueMicrotask或setTimeout(..., 0)把上报逻辑推到当前任务队列末尾，避免阻塞渲染 - 同一导航周期内的多个指标（如 FCP、LCP、TTFB、错误）打包成一条消息批量上报，减少请求数
- 网络异常时缓存未发数据，空闲时（
requestIdleCallback）再重试；非核心页面启用采样（如只上报 10% 用户） - 优先用
navigator.sendBeacon发送，确保页面卸载前也能发出；不支持时降级为fetch并设keepalive: true
还能用来识别刷量和异常访问
外挂工具（如 Puppeteer）模拟访问时，性能特征和真人差异明显：
- TTFB < 20ms 且总 load < 100ms → 高概率无头浏览器刷量
- FCP 和 LCP 时间差极小（
- 上报中
navigator.webdriver === true或 UA 含 “HeadlessChrome” → 明确外挂标识 - 把这些指标和 UA、设备信息一起上报，服务端可打标隔离可疑流量，避免污染分析结果
