前几次执行 setTimeout() 浏览器时间不到 4 毫秒

Question

在学习 "You Don't Know JS" 的异步和性能时，我尝试了这个小代码片段：

var t = [];
var c = 1;

function foo() {
  t.push((performance.now()).toString());
  if (c < 50) {
    setTimeout(foo, 0);
    c++;
  }
}

前几次浏览器（我使用 chrome）调用 foo 的时间少于 4ms。后来花了比 4ms.

多一点的时间

.

我想问一下，尽管在创建任务时 setTimeout() 为什么它在前 3-4 次表现得像微任务？

请帮帮我，谢谢。

Answer 1

为了回答这个问题，setTimeout() 是使用 the message queue. Microtasks are anything happen after each function is run, and before the message queue kicks in. The microtask queue is really the es6 job queue 的一个例子，但是自从 v8 之后它被赋予了一个新名称。

仅仅因为 4ms 下的任务并不能使它成为微任务。我有一个例子，其中第二个样本取 5ms:

您发现有趣趋势的原因很可能是 Chrome 优化。前几个调用几乎是立即完成的，随着调用堆栈变长，它会挖掘得更深以获取更多 RAM。

if (c < 50) {
  setTimeout(foo, 10);
  c++;
}

如果您尝试上面的代码片段，您会发现时间戳更加一致。这是因为调用堆栈以更规律的间隔添加。

前几次执行 setTimeout() 浏览器时间不到 4 毫秒

Browser time takes less than 4 milliseconds to execute setTimeout() for first few times

javascript

performance

asynchronous

performance-testing

settimeout