Как микротаски определяют скорость выполнения промиса?

Question

[Torento20345]

Как браузер понимает, что нам вернет без задержки в коде обе операции в then, а не разделит их на разные таски?

new Promise(resolve => {resolve()}).then(()=> 'one')).then(()=>'two')

Comments

[Lynn «Кофеман»]

А можно поподробнее?

[Torento20345]

Lynn «Кофеман»,
https://jsfiddle.net/391yqnmu/
микро и макро таски передаются в следующий таск
а это значит, что микротаск, если он будет с задержкой, передастся в следующий таск
Как здесь браузер понимает, что не нужно передавать 2-ой промис с консоль лог 4 в следующий таск, а выполняет тут же после 3 перед таймаутом?

Answer 1

[Aetae]

Никак.
Таски разные:

l = (text) => console.log(performance.now(), text) || true;

new Promise(resolve => {l('a1')&&resolve()}).then(()=> l('a2')&&'one').then(()=>l('a3')&&'two');
new Promise(resolve => {l('b1')&&resolve()}).then(()=> l('b2')&&'one').then(()=>l('b3')&&'two');

Comments

[Torento20345]

Почему консоль лог 4 выполнится раньше, чем 2?
Ведь микро таски передаются в следующий таск
Следовательно, что then с консоль лог 3 попадет в один таск с таймаутом, но почему браузер не передает следующий then с консоль лог 4 в другой таск, который после таймаута?
Ведь он так же возвращает промис, который передается в следующий таск
https://jsfiddle.net/391yqnmu/

[Aetae]

Torento20345, setTimeout никогда не 0, он минимум ~10ms, даже если ты указываешь ему 0 в задержке. По этому он падает в очередь после всех микротасков, которые идут просто друг за другом.

[Torento20345]

Aetae, а у микротасков ожидание 0 по факту?
И за эти 10мс выполнится 10 тасков получается?
А с чем связано такое, что таймауты минимум 10мс даже при 0, так для этого и было задумано?

[Aetae]

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

Answer 2

[Дмитрий Беляев]

У микротасок отдельная очередь выполнения. Если очень примитивно представить event-loop браузера, то получится код вроде такого:

// весь event-loop
while (true) {
  // цикл микротасок:
  while (!microtaskQueue.isEmpty) {
    microtaskQueue.runNext();
  }

  if (!macrotaskQueue.isEmpty) {
    macrotaskQueue.runNext()
  }
}

Как видно из этого псевдокода, очередь микротасков будет выполнятся пока она не закончится, а очередь макротасков будет выполнять по 1 таске на итерацию event-loop. Соответственно, если в микротаске добавить в очередь еще одну микротаску, то она выполнится на той же итерации event-loop до того как управление перейдет к макротаскам.
Этим кстати объясняется то, что такая функция вешает вкладку браузера намертво:

function microtaskBomb() {
  return Promise.resolve().then(microtaskBomb);
}

И да, в моем примере очень примитивное представление event-loop. На самом деле там происходит гораздо больше интересных вещей. Например requestAnimationFrame живут в своей очереди, которая тоже обрабатывается по особенному.

Comments

[Torento20345]

Мне показалось или я неправильно понял суть then?
Вроде then нам возвращают тоже промис
Но почему эти промисы, что в цепочке из then, выполняются в одном таске, а не так, как наш new Promise, который переносится на следующий?
Т.е. они возвращаются не просто промисами, а промисами, которые заведомо уже сразу с выполненным resolve?
И что бы нам сделать ожидание для следующего таска, нужно явно поместить в then создание new Promise с resolve?

[Aetae]

Torento20345, все они выпоняются одинково, яж примёвёл пример, консольный вывод:

a1
b1
a2
b2
a3
b3

по моему явно говорит, что никто никаких преференций не получает.