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

--- 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，与正文一致。