浏览器执行setTimeout()头几次所需时间少于4毫秒

Question

在从“您不了解JS”中学习异步和性能时，我尝试了下面这个小代码片段：

var t = [];
var c = 1;

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

在最初的几次中，浏览器(我使用了chrome)调用foo所用的时间少于foo。后来，它所花的时间略多于4ms。

​

。

我想问，尽管是setTimeout()，但在创建一个任务时，为什么它在最初的3-4次中表现得像微任务？

请帮帮我，谢谢。

Answer 1

为了回答这个问题，setTimeout()是使用消息队列的一个例子。微任务是在运行每个函数之后，在消息队列启动之前发生的任何事情。微任务队列实际上是es6作业队列，但是自从v8给它起了一个新的名称。

仅仅因为4ms下的任务并不意味着它就是一个微任务。我有一个例子，第二个样本取了5ms

​

​

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

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

如果您尝试上述片段，您会注意到时间戳的一致性要高得多。这是因为调用堆栈是以更规则的间隔添加到的。