如何选择Performance API指标匹配浏览器Network Tab的页面加载时间？

首先明确浏览器Network面板里的「Load时间」定义：它对应的是从页面导航开始（浏览器发起请求的时刻）到load事件完成的总时长，对应Performance API里的loadEventEnd - navigationStart。

你之前用domainLookupEnd、responseEnd这类指标组合计算方向偏了，正确的计算应该直接调用PerformanceNavigationTiming接口的对应字段：

const navigationEntry = performance.getEntriesByType('navigation')[0];
const loadTime = navigationEntry.loadEventEnd - navigationEntry.navigationStart;
console.log(`页面Load时间：${loadTime.toFixed(3)}ms`);

至于你提到的0.001-0.04秒（1-40ms）偏差，这是正常现象，也是当前能达到的最优结果，原因包括：

• 浏览器内部记录Network时间戳的精度，和Performance API暴露给JavaScript的精度存在细微差异（部分浏览器会对时间戳做取整或精度截断）；
• 代码执行时机的影响：如果在load事件触发后延迟执行API调用，浏览器已经完成部分后续操作，会带来极细微的时间差；
• 不同浏览器对Load时间的统计逻辑有毫秒级差别（比如Firefox和Chrome对load事件结束的判定点不完全一致）。

想要进一步缩小偏差，可以在load事件触发的瞬间就获取数据：

window.addEventListener('load', () => {
  const navigationEntry = performance.getEntriesByType('navigation')[0];
  const loadTime = navigationEntry.loadEventEnd - navigationEntry.navigationStart;
  console.log(`页面Load时间：${loadTime.toFixed(3)}ms`);
}, { once: true });

但完全消除偏差几乎不可能——JavaScript线程和浏览器内部的网络、UI线程之间存在微小的调度延迟，这是浏览器运行机制决定的。

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