Время браузера занимает менее 4 миллисекунд, чтобы выполнить setTimeout () в первые несколько раз

Question

Во время изучения Async и Performance от «You Know Know JS» я попробовал этот небольшой фрагмент кода:

var t = [];
var c = 1;

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

Первые несколько раз браузер (я использовал хром) занимал меньше 4ms позвонить foo. Позже это заняло немного больше, чем 4ms.

.

Я хотел спросить, несмотря на то, что был setTimeout() при создании задачи, почему он ведет себя как микрозадача дляпервые 3-4 раза?

Пожалуйста, помогите мне, спасибо.

Answer 1

Чтобы ответить на вопрос, setTimeout() является примером использования очереди сообщений . Микрозадачи - это все, что происходит после запуска каждой функции и до того, как включается очередь сообщений. Очередь микрозадач - это действительно очередь заданий es6 , но с тех пор как v8 ей было присвоено новое имя.

Только потому, что задачи берут под 4ms, это не делает его микрозадачей. У меня есть пример, когда второй образец взял 5ms:

Причиной интересной тенденции, которую вы обнаружили, является, скорее всего, оптимизация Chrome. Первые несколько вызовов выполняются практически мгновенно, и, поскольку стек вызовов увеличивается, он копает глубже, чтобы захватить больше оперативной памяти.

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

Если вы попробуете приведенный выше фрагмент кода, вы заметите, что временные метки гораздо более последовательны. Это связано с тем, что стек вызовов добавляется с более регулярным интервалом.