推荐使用 performance.getEntriesByType("navigation")[0] 获取导航记录，它基于 Navigation Timing API Level 2，提供高精度加载阶段时间戳；需在 DOMContentLoaded 或 load 事件中调用，且仅当前导航上下文有效。
可以通过 performance.getEntriesByType("navigation") 或直接读取 performance.navigationTiming（已废弃）的替代属性——更推荐使用 performance.getEntriesByType("navigation")[0] 获取首个导航记录，它基于 Navigation Timing API Level 2 标准，提供了完整、高精度的页面加载各阶段时间戳。
确认浏览器支持并获取导航性能数据
现代浏览器（Chrome 60+、Firefox 58+、Edge 79+、Safari 15.4+）均支持 navigation 类型的 PerformanceEntry。需注意：该数据仅在**当前页面导航上下文内有效**（即刷新或跳转后才更新），且必须在页面加载完成前（如 DOMContentLoaded 或 load 事件中）读取，否则可能为空。
- 用
performance.getEntriesByType("navigation")获取数组，通常首项即本次导航记录 - 若返回空数组，说明页面非正常导航（如 iframe 内加载、Service Worker 拦截未触发 timing）或调用过早
- 可加简单防护：
const nav = performance.getEntriesByType("navigation")[0] || {};
关键阶段时间戳及计算方法
Navigation Timing Level 2 将加载流程拆解为 20+ 个精确时间点。常用耗时字段均为 DOMHighResTimeStamp（毫秒级浮点数，精度达微秒），单位统一为毫秒，可直接相减：
-
重定向耗时：
nav.redirectEnd - nav.redirectStart（0 表示无重定向） -
DNS 查询耗时：
nav.domainLookupEnd - nav.domainLookupStart -
TCP 连接耗时：
nav.connectEnd - nav.connectStart -
SSL 协商耗时（若 HTTPS）：
nav.secureConnectionStart > 0 ? nav.connectEnd - nav.secureConnectionStart : 0 -
请求响应耗时（TTFB）：
nav.responseStart - nav.requestStart -
内容下载耗时：
nav.responseEnd - nav.responseStart -
DOM 解析耗时：
nav.domInteractive - nav.responseEnd -
DOM 完全加载耗时（白屏到可交互）：
nav.domContentLoadedEventEnd - nav.fetchStart -
页面完全加载耗时（含资源）：
nav.loadEventEnd - nav.fetchStart
实用示例：打印核心阶段耗时
以下代码可在 window.addEventListener("load", ...) 中运行，安全输出主要阶段耗时（单位：毫秒，保留一位小数）：
立即学习“前端免费学习笔记（深入）”；
const nav = performance.getEntriesByType("navigation")[0];
if (nav) {
const t = {
redirect: nav.redirectEnd - nav.redirectStart,
dns: nav.domainLookupEnd - nav.domainLookupStart,
tcp: nav.connectEnd - nav.connectStart,
ttfb: nav.responseStart - nav.requestStart,
download: nav.responseEnd - nav.responseStart,
domParse: nav.domInteractive - nav.responseEnd,
dcl: nav.domContentLoadedEventEnd - nav.fetchStart,
load: nav.loadEventEnd - nav.fetchStart
};
console.table(Object.entries(t).map(([k, v]) => [k, v.toFixed(1)]));
}
注意事项与常见问题
部分字段值为 0 或 0 可能有特殊含义，不是“没耗时”，而是“不可用”：
-
redirectStart/redirectEnd为 0：表示没有跨域重定向或重定向被 CORS 阻止（此时无法获取真实时间） -
secureConnectionStart为 0：说明是 HTTP 页面，或 HTTPS 但浏览器未暴露该字段（旧版 Safari） -
transferSize和encodedBodySize等大小字段需配合nextHopProtocol判断是否启用压缩/HTTP/2 - 若需上报，建议用
performance.toJSON()序列化整个对象，避免手动漏字段
