JavaScript性能测量_Navigation Timing API

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免费学习笔记（深入）”；

常见属性包括：

绘ai

ai绘图提示词免费分享

153

查看详情

• 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 事件触发时间

示例：计算白屏时间和首屏时间

推荐使用 PerformanceObserver 和 PerformanceNavigationTiming

performance.timing 已被弃用，现代开发应使用 PerformanceObserver 结合 PerformanceNavigationTiming 接口。

代码示例：

PerformanceNavigationTiming 提供了更精确的数据，并支持跨域资源的 timing（需服务端设置 Timing-Allow-Origin 头）。

实用建议与注意事项

• 避免依赖 performance.timing，优先使用新的 Performance API
• 注意隐私限制：某些值可能因安全策略被模糊处理（如跨源页面）
• 结合 performance.mark() 和 measure() 记录自定义性能标记
• 在生产环境中收集数据时，注意采样上报，避免性能开销过大
• 可配合 Lighthouse、Chrome DevTools 分析结果做对比验证

基本上就这些。Navigation Timing API 是前端性能监控的基础，掌握它能帮你精准定位加载瓶颈。不复杂但容易忽略细节，比如时间差的计算方式和跨域限制。用好它，性能优化才有据可依。

以上就是JavaScript性能测量_Navigation Timing API的详细内容，更多请关注php中文网其它相关文章！