怎么利用HTML5中NavigationTiming获取页面加载各阶段的详细耗时-H5教程-PHP中文网

推荐使用 performance.getEntriesByType("navigation")[0] 获取导航记录，它基于 Navigation Timing API Level 2，提供高精度加载阶段时间戳；需在 DOMContentLoaded 或 load 事件中调用，且仅当前导航上下文有效。

怎么利用html5中navigationtiming获取页面加载各阶段的详细耗时

可以通过 performance.getEntriesByType("navigation") 或直接读取 performance.navigationTiming（已废弃）的替代属性——更推荐使用 performance.getEntriesByType("navigation")[0] 获取首个导航记录，它基于 Navigation Timing API Level 2 标准，提供了完整、高精度的页面加载各阶段时间戳。

确认浏览器支持并获取导航性能数据

现代浏览器（Chrome 60+、Firefox 58+、Edge 79+、Safari 15.4+）均支持 navigation 类型的 PerformanceEntry。需注意：该数据仅在**当前页面导航上下文内有效**（即刷新或跳转后才更新），且必须在页面加载完成前（如 DOMContentLoaded 或 load 事件中）读取，否则可能为空。

用 performance.getEntriesByType("navigation") 获取数组，通常首项即本次导航记录
若返回空数组，说明页面非正常导航（如 iframe 内加载、Service Worker 拦截未触发 timing）或调用过早
可加简单防护：const nav = performance.getEntriesByType("navigation")[0] || {};

关键阶段时间戳及计算方法

Navigation Timing Level 2 将加载流程拆解为 20+ 个精确时间点。常用耗时字段均为 DOMHighResTimeStamp（毫秒级浮点数，精度达微秒），单位统一为毫秒，可直接相减：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

重定向耗时：nav.redirectEnd - nav.redirectStart（0 表示无重定向）
DNS 查询耗时：nav.domainLookupEnd - nav.domainLookupStart
TCP 连接耗时：nav.connectEnd - nav.connectStart
SSL 协商耗时（若 HTTPS）：nav.secureConnectionStart > 0 ? nav.connectEnd - nav.secureConnectionStart : 0
请求响应耗时（TTFB）：nav.responseStart - nav.requestStart
内容下载耗时：nav.responseEnd - nav.responseStart
DOM 解析耗时：nav.domInteractive - nav.responseEnd
DOM 完全加载耗时（白屏到可交互）：nav.domContentLoadedEventEnd - nav.fetchStart
页面完全加载耗时（含资源）：nav.loadEventEnd - nav.fetchStart

实用示例：打印核心阶段耗时

以下代码可在 window.addEventListener("load", ...) 中运行，安全输出主要阶段耗时（单位：毫秒，保留一位小数）：

const nav = performance.getEntriesByType("navigation")[0];
if (nav) {
  const t = {
    redirect: nav.redirectEnd - nav.redirectStart,
    dns: nav.domainLookupEnd - nav.domainLookupStart,
    tcp: nav.connectEnd - nav.connectStart,
    ttfb: nav.responseStart - nav.requestStart,
    download: nav.responseEnd - nav.responseStart,
    domParse: nav.domInteractive - nav.responseEnd,
    dcl: nav.domContentLoadedEventEnd - nav.fetchStart,
    load: nav.loadEventEnd - nav.fetchStart
  };
  console.table(Object.entries(t).map(([k, v]) => [k, v.toFixed(1)]));
}