performance.tojson() 将 performance 对象自身属性(如 navigation、timing、memory、timeorigin)序列化为 json,不含 getentries() 获取的自定义条目;需配合 getentriesbytype() 补全 web vitals 等指标,并用 sendbeacon 安全上报。

performance.toJSON() 是一个便捷方法,能将当前 Performance 对象(包括导航、资源、Paint、LCP、FID、CLS 等已采集的指标)序列化为标准 JSON 字符串,适合前端批量采集后通过日志上报或 Beacon 发送到后端做聚合分析。
理解 toJSON() 的实际输出内容
它不是导出所有历史 performance entries,而是把 performance 对象自身的属性(如 navigation、memory、timeOrigin、timing 等)转成 JSON。注意:
- 不包含通过 getEntries() 获取的自定义或资源条目(如 fetch、script、paint),需单独处理;
- navigation 和 timing 是核心,含重定向、DNS、TCP、TTFB、DOM 加载等完整导航时序;
- 若启用了 performance.memory(需 HTTPS + Chrome),会包含内存使用快照。
配合 getEntries() 补全关键性能条目
仅靠 toJSON() 不够全面。推荐组合使用:
- 调用
performance.toJSON()获取基础上下文(页面加载起点、内存、导航类型等); - 用
performance.getEntriesByType('navigation')补充更细粒度的导航指标(如nextHopProtocol、serverTiming); - 用
performance.getEntriesByType('paint')、'largest-contentful-paint'、'layout-shift'等获取核心 Web Vitals; - 对资源类条目(
'resource'),可过滤出关键 JS/CSS/图片,提取duration、transferSize、encodedBodySize等字段。
安全高效地上报到后端
避免阻塞渲染,优先使用 navigator.sendBeacon():
- 构造上报 payload:合并
toJSON()结果与关键 entries,控制总大小(建议 ≤ 64KB); - 添加业务上下文字段,如
pageId、env、userId(脱敏)、sessionId; - 对长字符串(如
serverTiming)做截断或哈希,防止 payload 膨胀; - 在
visibilitychange或beforeunload时机触发上报,确保用户离开前数据不丢失。
后端接收与解析建议
服务端收到 JSON 后需注意:
-
timing和navigation中的时间戳是毫秒级数字,但基于timeOrigin,需统一转换为绝对时间(timeOrigin + xxx)便于跨设备比对; -
serverTiming是数组,每个元素含name、duration、description,可展开为多行指标; - 对
layout-shift条目,提取value和sources判断抖动根因; - 建议用时序数据库(如 TimescaleDB)或 OLAP 引擎(ClickHouse)存储,按
pageId + timestamp建模,支撑分钟级聚合与下钻分析。











