Navigation Timing API 是浏览器提供的性能监控工具，通过 performance.timing（已弃用）和现代的 PerformanceNavigationTiming 获取页面加载各阶段高精度时间戳。它涵盖从导航开始、DNS解析、TCP连接、请求响应到DOM渲染和load事件等关键节点，帮助开发者计算白屏时间、首屏时间及TTFB等指标。推荐使用 PerformanceObserver 结合 getEntriesByType("navigation") 来获取更精确且兼容跨域的数据（需服务端设置 Timing-Allow-Origin）。实际应用中应避免直接读取 performance.timing，转而采用新的 Performance API，并结合自定义 mark/measurement、采样上报与 Lighthouse 等工具对比分析，以精准定位性能瓶颈。
要测量JavaScript应用的性能，特别是页面加载和网络请求相关的时间数据，Navigation Timing API 是一个强大且标准的工具。它提供高精度的时间戳，帮助开发者了解用户实际体验的页面加载性能，而不仅仅是粗略的 load 事件时间。
什么是 Navigation Timing API？
Navigation Timing API 是 W3C 定义的一个浏览器接口，用于获取页面导航和加载过程中的详细时间信息。它通过 performance.timing 对象（以及更现代的 PerformanceNavigationTiming）暴露一系列时间戳，涵盖从用户发起请求到页面完全加载的各个关键节点。
这些时间点包括：重定向开始、DNS 查询、TCP 连接、请求发送、响应接收、DOM 解析、load 事件触发等。
如何使用 performance.timing 获取性能数据
在旧版实现中，可以通过 performance.timing 对象获取时间戳。每个属性是一个 DOMHighResTimeStamp（单位：毫秒），表示某个事件发生的时间。
立即学习“Java免费学习笔记（深入）”；
常见属性包括：
- navigationStart：用户导航到当前页面的起始时间
- unloadEventStart / unloadEventEnd：前一个页面卸载事件的时间
- redirectStart / redirectEnd：重定向耗时
- fetchStart：开始获取页面资源（如缓存或网络）
- domainLookupStart / domainLookupEnd：DNS 解析时间
- connectStart / connectEnd：TCP 连接建立时间
- requestStart：向服务器发送请求的时间
- responseStart / responseEnd：接收到第一个和最后一个字节的时间
- domLoading：DOM 开始解析
- domInteractive：DOM 解析完成
- domContentLoadedEventStart / domContentLoadedEventEnd：DOMContentLoaded 事件时间
- loadEventStart / loadEventEnd：window load 事件触发时间
示例：计算白屏时间和首屏时间
const perfData = performance.timing;const whiteScreenTime = perfData.responseStart - perfData.navigationStart;
const firstPaintTime = perfData.domContentLoadedEventEnd - perfData.navigationStart;
console.log(`白屏时间: ${whiteScreenTime}ms`);
console.log(`首屏时间: ${firstPaintTime}ms`);
推荐使用 PerformanceObserver 和 PerformanceNavigationTiming
performance.timing 已被弃用，现代开发应使用 PerformanceObserver 结合 PerformanceNavigationTiming 接口。
代码示例：
function measureNavigation() {const perfEntries = performance.getEntriesByType("navigation");
if (perfEntries.length > 0) {
const navEntry = perfEntries[0]; // 类型为 PerformanceNavigationTiming
console.log(`DNS 查询耗时: ${navEntry.domainLookupEnd - navEntry.domainLookupStart}ms`);
console.log(`TCP 连接耗时: ${navEntry.connectEnd - navEntry.connectStart}ms`);
console.log(`页面完全加载时间: ${navEntry.loadEventEnd - navEntry.startTime}ms`);
console.log(`首字节时间 (TTFB): ${navEntry.responseStart - navEntry.startTime}ms`);
}
}
// 在页面加载完成后调用
window.addEventListener('load', measureNavigation);
PerformanceNavigationTiming 提供了更精确的数据，并支持跨域资源的 timing（需服务端设置 Timing-Allow-Origin 头）。
实用建议与注意事项
- 避免依赖 performance.timing，优先使用新的 Performance API
- 注意隐私限制：某些值可能因安全策略被模糊处理（如跨源页面）
- 结合 performance.mark() 和 measure() 记录自定义性能标记
- 在生产环境中收集数据时，注意采样上报，避免性能开销过大
- 可配合 Lighthouse、Chrome DevTools 分析结果做对比验证
基本上就这些。Navigation Timing API 是前端性能监控的基础，掌握它能帮你精准定位加载瓶颈。不复杂但容易忽略细节，比如时间差的计算方式和跨域限制。用好它，性能优化才有据可依。
