前端知库

页面导航的关键阶段怎样用 Navigation Timing 分析?

区分 DNS、连接、请求、响应、DOM 和加载事件时间点,避免把 loadEventEnd 当成页面可用时间。

参考答案

PerformanceNavigationTiming 提供一次导航的时间戳,例如 domainLookupStart/End、connectStart/End、requestStart、responseStart、responseEnd、domContentLoadedEventEnd 和 loadEventEnd。它可以帮助判断时间主要消耗在 DNS、连接、服务端首字节、下载还是页面脚本执行。

这些时间点描述浏览器事件,不等价于用户已经能顺畅使用页面。load 只表示页面依赖资源达到相应加载状态;大型脚本、长任务、字体替换和异步数据仍可能影响交互。要分析真实体验,还要结合 LCP、INP、CLS、Long Tasks 和业务可用信号。

跨页面、刷新、bfcache 恢复和 SPA 路由切换的观测方式也不同。采集时要处理没有某些条目、时间戳为零和隐私限制,不要把单个用户的一次测量当成整体结论。