Что ты такое, Event Loop? Или как устроен цикл событий в браузере Chrome

[BOM]

Следующий заказчик — Microtasks. У него Event Loop берет все задачи сразу и выполняет их.

Я бы немного переформулировал это предложение. Event Loop берет не все микротаски сразу, а приступает к выполнению задач из стека микротасок и не успокаивается до тех пор, пока не опустошит стек и только после этого переходит к Render.

[anatoliy841993]

Согласен, поправил. Спасибо за замечание

[Sindbad911]

По данной теме есть замечательное видео, ищеться по запросу Иван Тулуп.

[anatoliy841993]

Читал ее. Согласен, хорошая статья

[DonAlPAtino]

У меня после запуска Promise.resolve().then(foo); на Processing Profile вкладка просто зависает… Так что картинки даже увидеть не могу…

[anatoliy841993]

Я ниже при разборе решения написал что изменил число итераций на конечное число) Вы можете сделать например так:

for (let i = 0; i < 10000; i += 1) {
	Promise.resolve().then(() => console.log('I am microtask'));
}

И при запуске профайла все будет ок

[PYXRU]

Если я правильно понял код движка, MacroTask(у вас в статье Task), они ставятся в конец следущей кучи вызова, а MicroTask в конец текущей

[Psychosynthesis]

Ваше объяснение понятней, имхо.

[Uniquename]

setTimeout( () => console.log('timeout'), 0);
Promise.resolve('promise').then(console.log);

console.time('loop');
for (i = 1; i < 1000000000; i++) {}
console.timeEnd('loop');

насколько я понял статью, Microtask (promise) попадет в Call stack после Tast (timeout).
но в консоли сначала будет 'promise', потом 'timeout'. почему?

[mayorovp]

На самом деле, ваш код — это и есть тот самый первый Task, после выполнения которого будут выполняться все микротаски.

[anatoliy841993]

да, спасибо за ответ)

[anatoliy841993]

давайте по порядку выполним ваш фрагмент кода:
— первым делом ставится в очередь задача от Tasks — run script
— помещается в очередь Tasks queue коллбек setTimeout
— помещается в очередь Microtasks queue коллбек Promise
— завершается задача Tasks run script после выполнения цикла
— выполняются задачи от Microtasks (они идут после Tasks)
— происходит цикл рендеринга
— снова возвращаемся к задачам от Tasks где есть коллбек нашего таймаута и кидаем его в callStack
— все)

[Uniquename]

да, спасибо, разобрался. run script у меня потерялся)

[Psychosynthesis]

Вообще это полезные знания, с одной стороны…

С другой:
1. Нет совершенно никакой гарантии, что все движки работают аналогичным образом.
2. Данные знания нужны разве что вы разрабатываете какое-то высоконагруженное приложение для браузера, что уже само по себе не самая здравая затея.

[anatoliy841993]

спасибо за комментарий! знания про то как работает браузер и последовательность и приоритетность работы event loop важна не только для разработки высоконагруженных приложений
движки работают по-разному разве что на цикле render и requestAnimationFrame (может еще меняться их порядок :D), в остальных случаях все практически одно и то же