Chrome: `fetch` 耗时太长

Question

更新：

我将 API 从 fetch 更改为 XMLHttpRequest，但问题仍然存在。

根据控制台日志，延迟介于“readyState 1”（即打开）和“readyState 2”（即HEADERS_RECEIVED).

此外，也许值得一提的是，它在 Firefox 中运行良好。

关于如何调试为什么 fetch() 的调用在 chrome 中花费 1 秒的原因，我将不胜感激。

根据 "network" 选项卡，请求仅用了 12 毫秒。但是在我的日志和 "timeline" 选项卡中，fetch() 需要 1.06 秒。（下面的屏幕截图）。

关于如何找出拖延 fetch() 的原因的任何提示？

网络标签截图：

时间轴标签截图：

Answer 1

我敢打赌，因为当您 async: false 这是由于某些东西阻塞了主线程时，延迟就会消失。

Here，在 WebWorker 内部使用 Fetch 并将结果发回主线程的简单请求大约需要 10 毫秒。

var workerBlobs = Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return new Blob([oScript.textContent], {type: "text/javascript"}); });

var workers = workerBlobs.map(function(oBlob) { return new Worker(URL.createObjectURL(oBlob)); });

var log = document.getElementById('log');

function println(s) {
  log.appendChild(document.createTextNode(s+'\n'));
}
workers[0].onmessage = function(oEvent) {
 println("Done in " + ( performance.now() - start ).toFixed(4) + "ms" );
  println(oEvent.data.message);
}
workers[0].onerror = function(oEvent) {
  println("Error: "+JSON.stringify(oEvent.data));
}

var start = performance.now();
workers[0].postMessage('http://stacksnippets.net/');

#log {
  white-space: pre-wrap;
}

<script type="text/js-worker">
onmessage = function (oEvent) {
  fetch(oEvent.data).then(function(response) {
    response.text().then(function(text){
      console.log("response:",text);
      postMessage({ type: 'response', message: text });
    });
  }).catch(function(err) {
    console.error("error:",err);
    postMessage({ type: 'error', message: err.toString(), stack: err.stack });
  });
}
</script>
<pre id="log"></pre>

您在尝试执行时必须原谅错误信息；请求在该代码段沙箱内有些封锁。如果我找到一个有效的 URL，我会把它扔进去。使用 jsfiddle.net 示例。

编辑：更新了 jsfiddle.net 示例。使用 postMessage 时会产生一些轻微的延迟损失（在本例中，chrome 中大约为 5 毫秒）。相同的 10ms 平均总数。这可能会通过使用可传输数组缓冲区和其他一些恶作剧来解决。

为了更清楚地了解这一点，您应该能够使用此示例在工作线程上执行提取和计时，然后查看返回主线程需要多长时间。如果从 worker 到 main 花费了太多时间，那么主 JS 线程中有东西阻塞了。然后你必须找到它，并引入一些异步流以允许在你的获取等过程中穿插。

Answer 2

原来这是一个 Chrome 错误，现在已在 Chrome 54 中修复： https://bugs.chromium.org/p/chromium/issues/detail?id=649590#c1

Chrome: `fetch` 耗时太长

Chrome: `fetch` takes too long

javascript

google-chrome

babeljs

polyfills

babel-polyfill

更新：