---

title: Navigation Timing v2：PerformanceNavigationTiming 的首包与关键阶段

keywords:

• PerformanceNavigationTiming
• Navigation Timing
• TTFB
• DOMContentLoaded
• 交互就绪
• RUM

description: 系统梳理 Navigation Timing v2 的关键时间点（从请求到 DOMContentLoaded 与交互就绪），说明指标采集与常见瓶颈定位方法，并附权威参考。

categories:

• 文章资讯
• 技术教程

---

概述

Navigation Timing v2（PerformanceNavigationTiming）为主文档导航过程提供高分辨率时间点，包括网络阶段、解析阶段与事件阶段。结合 RUM 可定位首包延迟（TTFB）与 DOM 解析/事件处理瓶颈。

关键时间点

• responseStart：首字节到达（TTFB），受网络与后端处理影响。
• domContentLoadedEventStart/End：DOM 解析完成前后，衡量 DCL 处理耗时［参考1,3,5］。
• 其它常用点：requestStart、responseEnd、loadEventStart/End。

采集与分析

• 通过 performance.getEntriesByType('navigation') 读取 PerformanceNavigationTiming；记录 responseStart 与 domContentLoadedEventStart/End，计算 DCL 事件耗时与首包时延［参考3］。
• 结合资源时序（Resource Timing）与主线程阻塞（Long Tasks）定位解析与脚本执行瓶颈。

优化建议

• 降低 TTFB：后端性能、缓存策略、CDN、压缩与连接复用。
• 缩短 DCL：减少阻塞脚本与同步任务，按需加载与代码拆分。

参考与验证

• ［参考1］MDN：PerformanceNavigationTiming（DCL 事件时间与接口）：https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming
• ［参考2］W3C：Navigation Timing Level 2 规范（时序定义）：https://www.w3.org/TR/navigation-timing-2/
• ［参考3］MDN：Navigation timing 指南（采集方法与 DCL 说明）：https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Navigation_timing
• ［参考4］MDN：导航与资源时序综述（解析流程与事件阶段）：https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Navigation_and_resource_timings
• ［参考5］W3C 编辑稿：Navigation Timing 2（DCL start/end 定义）：https://w3c.github.io/navigation-timing/

关键词校验

关键词覆盖导航时序与 DCL/TTFB，与正文一致。