为什么XHR报告状态加载和完成的同一时间，即使内容下载花费几秒钟？

Question

我希望使用XHR readyStatus更改来监控API调用在服务器端响应和内容下载上花费的时间。

let result = {};
xhr.onreadystatechange = function () {
  result[xhr.readyState] = Date.now();
}

在一次API调用之后，result看起来像这样：

{
  1: 1509274853725, // OPENED
  2: 1509274857991, // HEADERS_RECEIVED (~4.2s)
  3: 1509274857992, // LOADING
  4: 1509274857992  // DONE
}

但Chrome DevTool为我提供了不同的结果：

我希望HEADERS_RECEIVED和OPEN之间的差异大约是746毫秒，DONE和HEADERS_RECEIVED之间的差异大约是3.52秒。

为什么差异如此之大？