Comments 16
Следующий заказчик — Microtasks. У него Event Loop берет все задачи сразу и выполняет их.
Я бы немного переформулировал это предложение. Event Loop берет не все микротаски сразу, а приступает к выполнению задач из стека микротасок и не успокаивается до тех пор, пока не опустошит стек и только после этого переходит к Render.
По данной теме есть замечательное видео, ищеться по запросу Иван Тулуп.
У меня после запуска Promise.resolve().then(foo); на Processing Profile вкладка просто зависает… Так что картинки даже увидеть не могу…
Если я правильно понял код движка, MacroTask(у вас в статье Task), они ставятся в конец следущей кучи вызова, а MicroTask в конец текущей
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'. почему?
На самом деле, ваш код — это и есть тот самый первый Task, после выполнения которого будут выполняться все микротаски.
давайте по порядку выполним ваш фрагмент кода:
— первым делом ставится в очередь задача от Tasks — run script
— помещается в очередь Tasks queue коллбек setTimeout
— помещается в очередь Microtasks queue коллбек Promise
— завершается задача Tasks run script после выполнения цикла
— выполняются задачи от Microtasks (они идут после Tasks)
— происходит цикл рендеринга
— снова возвращаемся к задачам от Tasks где есть коллбек нашего таймаута и кидаем его в callStack
— все)
— первым делом ставится в очередь задача от Tasks — run script
— помещается в очередь Tasks queue коллбек setTimeout
— помещается в очередь Microtasks queue коллбек Promise
— завершается задача Tasks run script после выполнения цикла
— выполняются задачи от Microtasks (они идут после Tasks)
— происходит цикл рендеринга
— снова возвращаемся к задачам от Tasks где есть коллбек нашего таймаута и кидаем его в callStack
— все)
Вообще это полезные знания, с одной стороны…
С другой:
1. Нет совершенно никакой гарантии, что все движки работают аналогичным образом.
2. Данные знания нужны разве что вы разрабатываете какое-то высоконагруженное приложение для браузера, что уже само по себе не самая здравая затея.
С другой:
1. Нет совершенно никакой гарантии, что все движки работают аналогичным образом.
2. Данные знания нужны разве что вы разрабатываете какое-то высоконагруженное приложение для браузера, что уже само по себе не самая здравая затея.
спасибо за комментарий! знания про то как работает браузер и последовательность и приоритетность работы event loop важна не только для разработки высоконагруженных приложений
движки работают по-разному разве что на цикле render и requestAnimationFrame (может еще меняться их порядок :D), в остальных случаях все практически одно и то же
движки работают по-разному разве что на цикле render и requestAnimationFrame (может еще меняться их порядок :D), в остальных случаях все практически одно и то же
Sign up to leave a comment.
Что ты такое, Event Loop? Или как устроен цикл событий в браузере Chrome