使用PerformanceEntry API获取单个值：domComplete与duration返回0的问题咨询

嘿，这个问题我之前踩过坑！你遇到的情况大概率是代码执行时机太早，再加上浏览器控制台的小特性给你造成了误解，下面一步步给你讲清楚原因和解决办法：

为什么会返回0？ #

1. 指标还没就绪：domComplete和duration属于Navigation Timing的核心加载指标，只有当页面整个导航加载流程完全结束（包括所有资源加载完成、DOM解析彻底完成）后，这些值才会被正确计算。如果你的代码在页面还没加载完就执行，这些字段自然就是初始的0值。
2. 控制台的惰性求值误导：你打印time[0]时展开能看到正确值，是因为浏览器控制台的对象是实时惰性展示的——当你手动展开这个对象的时候，页面已经加载完成了，所以显示的是更新后的数值，但代码执行的那个瞬间，这些属性确实是0。

正确的解决方案 #

你需要确保代码在页面加载完成后再执行，这里有几个可靠的实现方式：

1. 使用window.onload事件 #

window.onload会在页面所有资源（包括图片、样式表、脚本等）加载完成后触发，这时候调用Performance API就能拿到准确的指标值：

window.onload = function() {
  const navigationEntries = performance.getEntriesByType("navigation");
  if (navigationEntries.length > 0) {
    console.log("domComplete值：", navigationEntries[0].domComplete);
    console.log("duration值：", navigationEntries[0].duration);
  }
};

2. 使用requestIdleCallback（适配现代浏览器） #

如果不想严格等待所有资源加载完成，也可以利用浏览器的空闲时机去获取，这时候页面基本已经加载就绪：

requestIdleCallback(() => {
  const navigationEntries = performance.getEntriesByType("navigation");
  if (navigationEntries.length > 0) {
    console.log("domComplete值：", navigationEntries[0].domComplete);
    console.log("duration值：", navigationEntries[0].duration);
  }
});

3. 单页应用（SPA）的额外提示 #

如果你的项目是SPA，用navigation类型的条目可能无法获取路由切换的加载时间，这时候建议使用performance.mark()和performance.measure()来手动标记和计算自定义的加载指标。

内容的提问来源于stack exchange，提问作者kevinmcurran