javascript - 前几次浏览器执行 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 的时间不到 4ms。后来花费了略多于 4ms 的时间。

.

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

请帮帮我， 谢谢。

Answer 1

为了回答这个问题，setTimeout() 是使用 the message queue 的示例。 。微任务是在每个函数运行之后、消息队列启动之前发生的任何事情。微任务队列实际上是 es6 job queue ，但自从 v8 以来，它被赋予了一个新名称。

仅仅因为任务花费在4ms以下并不意味着它是一个微任务。我有一个示例，其中第二个示例花费了 5ms:

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

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

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