HTML中如何使用Navigation Timing分析导航耗时-html教程-PHP中文网

Navigation Timing API 返回 PerformanceNavigationTiming 对象数组，含DNS、TCP、请求响应、DOM渲染等各阶段高精度时间戳；需用 performance.getEntriesByType('navigation')[0] 安全获取首航数据，并校验 entry.name === location.href，避免 iframe 干扰。

html中如何使用navigation timing分析导航耗时

Navigation Timing API 返回什么数据

它不是函数，而是浏览器原生提供的 performance.navigation（已废弃）和更可靠的 performance.getEntriesByType('navigation')。现代页面应只依赖后者，返回一个数组，每个元素是 PerformanceNavigationTiming 对象，包含从重定向、DNS 查询、TCP 连接、SSL 握手、请求发送、响应接收，到 DOM 解析、资源加载等全部阶段的时间戳。

关键点：必须在页面加载完成前读取，否则可能被清空或截断；且仅对同源导航有效（跨域 iframe 的导航条目会被省略部分字段，redirectStart/redirectEnd 等为 0）。

如何安全获取首次导航的 timing 数据

不能直接在 DOMContentLoaded 或 load 事件里调用 getEntriesByType('navigation') 并假设第一个就是当前页——如果页面有预加载、iframe 导航或 SPA 路由切换，结果可能错乱。

优先用 performance.getEntriesByType('navigation')[0]，但需检查是否存在且 entry.name === location.href（避免匹配到 iframe 的导航）
更稳妥的做法是监听 navigation 类型的 performance.entry，但该事件仅在 Chrome 120+ 支持，兼容性差

实际项目中建议在内尽早执行：

const navEntries = performance.getEntriesByType('navigation');<br>const firstNav = navEntries.length > 0 ? navEntries[0] : null;

计算各阶段耗时要注意单位和零值

所有时间字段都是毫秒级浮点数，但很多字段在不适用时返回 0（比如没有重定向时 redirectStart 和 redirectEnd 都是 0），直接相减会得到错误的“0ms”结论。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

判断是否发生某阶段：用 entry.redirectStart > 0，而非 entry.redirectStart !== 0（因为时间戳可能恰好是 0）
DNS 查询耗时 = entry.domainLookupEnd - entry.domainLookupStart，若两者均为 0，说明走的是本地缓存或 hosts，不应计入 DNS 延迟
TTFB = entry.responseStart - entry.requestStart，但 requestStart 在某些浏览器（如 Safari）可能为 0，此时可用 entry.fetchStart 替代
首字节时间（TTFB）和白屏时间（entry.domLoading - entry.fetchStart）才是业务最常监控的两个指标

为什么在 React/Vue SPA 里拿不到准确的 navigation timing

因为 SPA 路由跳转不会触发新的 navigation 条目，getEntriesByType('navigation') 只返回页面首次加载那次记录。后续路由变化属于 JS 控制的视图更新，不在 Navigation Timing 范围内。

解决思路不是硬套这个 API，而是改用 performance.mark() + performance.measure() 手动打点：

在路由 beforeEach（Vue Router）或 useEffect（React）中调用 performance.mark('route-start')
在组件挂载/数据加载完成时打 performance.mark('route-end')
再用 performance.measure('route-load', 'route-start', 'route-end') 获取耗时
注意：这些自定义 mark 不会上报到 performance.getEntriesByType('navigation')，得单独收集

Navigation Timing 是给“完整页面导航”用的，不是通用性能打点工具；混淆使用会导致数据失真，尤其在混合了 SSR 和 CSR 的项目里，首屏和后续导航的统计逻辑必须分开设计。