Chrome:`fetch`需要太长时间

时间:2016-09-12 07:36:08

标签: javascript google-chrome babel polyfills babel-polyfill

更新

我将API从fetch更改为XMLHttpRequest,我仍然看到了问题。

根据控制台日志,延迟在“ readyState 1 ”(即OPENED)和“ readyState 2 ”之间(即HEADERS_RECEIVED)。

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

我很感激关于如何调试为什么调用fetch()在Chrome中需要1秒的一些指示。

根据“网络”标签,请求只需12毫秒。但是,在我的日志和“时间轴”标签中,fetch()需要1.06秒。 (截图见下文)。

有关如何找出导致fetch()停滞的内容的任何提示?

网络标签截图: enter image description here

时间线标签截图: enter image description here

2 个答案:

答案 0 :(得分:4)

我正在下注,因为当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>

尝试执行时,您必须原谅错误消息;请求有点封锁在该片段沙箱中。如果我找到一个有效的网址,我会将其丢入。请使用jsfiddle.net示例。

修改:更新了jsfiddle.net示例。 使用postMessage时会产生一些轻微的延迟损失(在此示例中,chrome中约为5ms)。平均总数相同10ms。这可能会使用可传输的数组缓冲区和其他一些恶作剧。

为了更清楚这一点,您应该能够使用此示例在您的工作线程上执行获取和计时,然后查看返回主线程所需的时间。如果从工作者转到main需要花费太多时间,那么在JS主线程中就会出现阻塞。然后你必须追捕它,并引入一些异步流程,以允许你的提取和这样的散布。

答案 1 :(得分:0)

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