Событийный цикл: микрозадачи и макрозадачи

Оригинал из learn.javascript: https://learn.javascript.ru/event-loop

Прекрасная статья из прекрасного учебника про основную концепцию JavaScript: цикл событий.

Цикл событий состоит из итераций, потому он и цикл. Каждая итерация начинается с выполнения "макротаска". Например, написанный вами синхронный код - это макротаск, и цикл событий начинается с его выполнения.

Когда макротаск выполнен, проверяется очередь микротасков. Это в основном промисы, а точнее блоки .then, .catch, .finally, которые готовы выполниться. Тело промиса выполняется синхронно, то есть входит в макротаск.

Итак, сначала выполняется ваш синхронный код, а затем все готовые промисы. Причем, все сразу, так что у них получается один контекст выполнения.

И только после опустошения очереди микротасков происходит рендеринг - обновление страницы. Если ваш синхронный код что-то поменял на странице, появится это изменение только сейчас, после того, как обработаны все готовые промисы.

После этого начинается следующая итерация цикла событий. Для нее берется новый макротаск. Но откуда он берется, если весь код уже выполнен? Это различные асинхронные действия (кроме промисов). Это может быть выполнившийся setTimeout, пришедший ответ сервера или пользовательское событие, например, клик. При этом макротаск берется самый старый, который ждет дольше всех.

После того как он выполнится, снова запускаются все микротаски, которые готовы к этому моменту. И лишь после этого выполняется рендеринг - внесение изменений на страницу.

Итак, одна итерация цикла событий:
- один макротаск (самый старый из очереди) - синхронный код, setTimeout, ответы API, пользовательские события
- все готовые микротаски (обработчики промисов)
- рендеринг

После статьи есть задачки на понимание последовательности выполнения операций - несложные и полезные.

#javascript #eventloop #основныеконцепции