为什么performance.now（）和Chrome的性能工具会显示不同的结果？

Question

我创建了一些快速代码来测试它。我在我的页面上包含了这个脚本并刷新了浏览器：

const startTime = performance.now();
const img = new Image();
img.src = 'https://www.google.co.uk/images/branding/googleg/1x/googleg_standard_color_128dp.png?' + Math.random();
const endTime = performance.now();
const downloadTime = endTime - startTime;
console.log(downloadTime);

该脚本将endTime报告为0.19000000000005457。 endTime值是DOMHighResTimestamp returns a double in milliseconds的实例。

但Chrome开发人员工具报告说花了81毫秒。这对我的问题来说有很大的不同。如果它只花了81毫秒，为什么我的脚本报告190毫秒？或者我错过了一些明显的东西？

修改

感谢Josh的回答，指出它需要在load处理程序中。我的错。但遗憾的是，价值观仍然不一致。

为什么还要投票呢？这是一个合理的问题。我需要知道最后一个细节，确切地说是出于特定原因下载特定图像需要多长时间。

Answer 1

<img>个元素是异步加载的。您的代码是同步编写的。

const downloadTime = endTime - startTime;

与Network DevTools标签上的资源请求无关。

您可以使用PerformanceObserver获取与"resource"

请求相关的效果指标

＆＃13;

＆＃13;

const observer = new PerformanceObserver((list, obj) => {
  for (let entry of list.getEntries()) {
    for (let [key, prop] of Object.entries(entry.toJSON())) {
      console.log(`${key}: ${prop}`);
    }
  }
});

observer.observe({
  entryTypes: ["resource"]
});

const img = new Image();
img.src = 'https://www.google.co.uk/images/branding/googleg/1x/googleg_standard_color_128dp.png?' + Math.random();

＆＃13;

＆＃13;

＆＃13;

Answer 2

请记住，JavaScript是单线程的 - 特别是任何网络代码都是通过事件处理程序异步发生的。任何你可以从上到下阅读的代码或多或少地瞬间发生（除了重度DOM / CSS滥用或大量CPU绑定代码之外）。

看起来您想知道下载图片需要多长时间？观看图片上的load事件。

＆＃13;

＆＃13;

const startTime = performance.now();
const img = new Image();
img.addEventListener('load', () => {
  const endTime = performance.now();
  const downloadTime = endTime - startTime;
  console.log(downloadTime);
});
img.src = 'https://www.google.co.uk/images/branding/googleg/1x/googleg_standard_color_128dp.png?' + Math.random();

＆＃13;

＆＃13;

＆＃13;

可能同步发生的代码示例，如果您随后将图像插入到文档中并询问宽度/高度，这将在图像被解码和渲染时阻塞，并且布局发生。