Javascript 获取时间与 XHR 网络时间

Question

我在 javascript 中有一个基本代码可以通过 api 调用获取数据：

var t0 = performance.now();
fetch(
    'http://domain/service',
    { method: 'GET' }
  )
  .then( response => {
      //handle response...
       t1 = performance.now();
       console.log('Call to fetch-start took ' + (t1 - t0) + ' milliseconds.');
    } )
  .catch( error => console.error('error:', error) )
  .then( () => {
       ...
       t1 = performance.now();
       console.log('Call to fetch-end took ' + (t1 - t0) + ' milliseconds.');
    } );

调用时，Chrome网络时间显示为：

但控制台显示如下：

Call to fetch-start took 1931.162 milliseconds.
Call to fetch-end took 2846.36500000488 milliseconds.

我不明白浏览器网络时间和获取时间之间的区别。两者应该是一样的吧？

Answer 1

那是因为当 fetch 解析 Body object 时，只完成了 headers 的协商和获取。
数据的获取仍在进行中，这就是我们可以 consume this Body as a stream..

的方式

最接近实际提取结束的是 Body.arrayBuffer()，它不对提取的数据执行任何转换。

Javascript 获取时间与 XHR 网络时间

Javascript Fetch Time vs XHR Network Time

javascript

api

performance

fetch-api