应使用performancenavigationtiming替代已废弃的performance.timing，通过performance.getentriesbytype('navigation')[0]获取含20+精确时间戳的导航流水线，聚焦白屏、首屏、ttfb等用户感知指标并结合重定向、dns、协议类型等上下文归因分析。
直接读取 performance.timing 或更推荐的 PerformanceNavigationTiming 对象，就能拿到从用户点击链接到页面完全可视的完整时间链。关键不是“有没有数据”，而是如何把每个时间点对应到真实加载阶段，并识别出哪一段真正拖慢了体验。
核心时间点对应真实加载阶段
浏览器在导航过程中自动记录 20+ 个精确时间戳，它们不是孤立数字，而是一条可拆解的流水线：
-
navigationStart：用户行为起点——点击链接、输入地址、调用
location.href的瞬间（前页已卸载完成） - fetchStart：浏览器真正开始干活——查缓存或发网络请求（若无重定向，通常紧接 navigationStart）
- domainLookupStart → domainLookupEnd：DNS 查询耗时，值为 0 表示命中本地缓存或使用了 HTTP/2 连接复用
-
connectStart → connectEnd：TCP 连接建立时间，含 TLS 握手（
secureConnectionStart可单独提取握手耗时） - requestStart → responseStart：网络往返（TTFB），反映服务器响应速度和链路延迟
- responseStart → domLoading：HTML 文档下载中，空白屏持续阶段
- domLoading → domInteractive：HTML 解析 + 同步脚本执行，JS 阻塞在此阶段最明显
- domInteractive → domContentLoadedEventEnd：异步资源加载、DOM 构建完成、DOMContentLoaded 触发全过程
- domContentLoadedEventEnd → loadEventEnd：图片、CSS、外部脚本等剩余资源加载及 onload 回调执行
计算关键用户体验指标
仅看总加载时间（loadEventEnd - navigationStart）意义有限。应聚焦影响用户感知的几个硬指标：
-
白屏时间：
responseStart - navigationStart—— 用户看到第一个像素前的等待 -
首屏时间（近似）：
domContentLoadedEventStart - navigationStart—— DOM 就绪、样式生效、首屏内容可交互的标志性节点 -
TTFB（Time to First Byte）：
responseStart - requestStart—— 诊断后端性能或 CDN 效果的黄金指标 -
DOM 解析耗时：
domInteractive - domLoading—— 若超过 200ms，需检查 HTML 体积或同步 JS 执行开销 -
资源加载总耗时：
loadEventEnd - domContentLoadedEventEnd—— 定位大图、第三方 SDK 等长尾资源
用 PerformanceNavigationTiming 替代已废弃的 timing 对象
performance.timing 在现代浏览器中仍可用，但规范已明确标记为 legacy。推荐使用标准、语义清晰且含导航类型的新接口：
- 调用
performance.getEntriesByType('navigation')[0]获取首个导航记录（单页应用需注意多条记录） - 该对象含
entryType: 'navigation'、name: 当前 URL、type: 'navigate' | 'reload' | 'back_forward' - 所有时间字段与
timing一致（如startTime对应navigationStart），但单位统一为毫秒，精度更高 - 支持跨域 iframe 场景下的安全时间采集（旧 timing 在跨域 iframe 中部分字段返回 0）
实际分析建议
不要只在控制台打印一次数据。要让 Navigation Timing 发挥价值，需结合场景落地：
- 在
window.addEventListener('load', ...)中采集，确保所有时间点已就绪 - 对重定向频繁的页面，用
redirectCount和redirectStart/End判断是否因跳转链过长导致 TTFB 累积 - 对比
domainLookupStart === fetchStart是否成立，快速识别 DNS 未生效或被绕过的异常路径 - 将计算出的各阶段耗时按百分比归一化，生成“加载瀑布图”式文字报告，一眼定位瓶颈段
- 上报时附带
type（navigate/reload/back_forward）和nextHopProtocol（h2 / http/1.1），便于分维度归因
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
