Event Loop или почему страницы тормозят 💤
Наверное вы замечали что страницы сайтов в какой то момент перестают отвечать и "зависают". По большей части это происходит потому, что JS - однопоточный язык. А вся асинхронность это не часть самого языка, а часть браузерного WebAPI или среды NodeJS.
Так же для реализации мнопоточности с определенными ограничениями можно использовать Web Workers API. https://developer.mozilla.org/ru/docs/Web/API/Web_Workers_API/Using_web_workers
Но вернемся к основной теме, почему страницы зависают. Все дело в Event Loop - событийном цикле.
Это бесконечный цикл, который с определенным приоритетом обрабатывает задачи, полученные от разных заказчиков:
1. Macrotasks - сам js скрипт, события, отложенные задачи - setTimeout, setInterval, ajax и т.д.
2. Microtasks - promises, MutationObserver, queueMicrotask(task)
3. Render - задачи на отрисовку
Как отрабатывает цикл
1. Сначала event loop берет одну макротаску и выполняет ее.
2. После ее выполнения, он переходит к очереди microtasks и выполняет ее пока она не закончится, если их нет - пропускает и идет дальше.
3. Выполняет задачи на Render, если их нет - пропускает и идет дальше.
Дальше все повторяется.
То есть, пока исполняются таска и микротаски, браузер не приступает к отрисовке.
Это означает, если код в таске или микротаске будет исполнятся 15 секунд, то все это время страница будет висеть и не реагировать.
Подробней и с картинками тут https://bearlogin.notion.site/Event-Loop-84c24de514544b7bb05ada9d36199abe
Если Вам понравилась статья, и то что я делаю, поддержите меня и расскажите про мой канал друзьям. 👍
#frontend #nodejs #eventloop #js
Наверное вы замечали что страницы сайтов в какой то момент перестают отвечать и "зависают". По большей части это происходит потому, что JS - однопоточный язык. А вся асинхронность это не часть самого языка, а часть браузерного WebAPI или среды NodeJS.
Так же для реализации мнопоточности с определенными ограничениями можно использовать Web Workers API. https://developer.mozilla.org/ru/docs/Web/API/Web_Workers_API/Using_web_workers
Но вернемся к основной теме, почему страницы зависают. Все дело в Event Loop - событийном цикле.
Это бесконечный цикл, который с определенным приоритетом обрабатывает задачи, полученные от разных заказчиков:
1. Macrotasks - сам js скрипт, события, отложенные задачи - setTimeout, setInterval, ajax и т.д.
2. Microtasks - promises, MutationObserver, queueMicrotask(task)
3. Render - задачи на отрисовку
Как отрабатывает цикл
1. Сначала event loop берет одну макротаску и выполняет ее.
2. После ее выполнения, он переходит к очереди microtasks и выполняет ее пока она не закончится, если их нет - пропускает и идет дальше.
3. Выполняет задачи на Render, если их нет - пропускает и идет дальше.
Дальше все повторяется.
То есть, пока исполняются таска и микротаски, браузер не приступает к отрисовке.
Это означает, если код в таске или микротаске будет исполнятся 15 секунд, то все это время страница будет висеть и не реагировать.
Подробней и с картинками тут https://bearlogin.notion.site/Event-Loop-84c24de514544b7bb05ada9d36199abe
Если Вам понравилась статья, и то что я делаю, поддержите меня и расскажите про мой канал друзьям. 👍
#frontend #nodejs #eventloop #js
👍1
Что нового в 20 ноде
Из интересного - нативный тест раннер вышел в стейбл, и можно добавлять разрешения на запуск скриптов
https://www.sitepoint.com/node-js-20-new/
#nodejs
Из интересного - нативный тест раннер вышел в стейбл, и можно добавлять разрешения на запуск скриптов
https://www.sitepoint.com/node-js-20-new/
#nodejs
SitePoint
What’s New in Node.js 20
Node.js 20 was released in April 2023. Learn about the new options available to developers with the world's most-used JavaScript runtime.
👍1
Еременко Павел Андреевич.pdf
41.3 KB
Помогите Паше найти работу
Ребят, бро ищет работу фронтом или фулстеком в React или React+NodeJs в целом по хардам крепкий джун, но при этом хорошо решает бизнес задачи, есть аналитическое мышление.
Кому не сложно, закиньте вашим HR, поможем всем миром, как говориться :)
ЛС Паши @eremenko_pa
#frontend #react #nodejs #nestjs #резюмешка
Ребят, бро ищет работу фронтом или фулстеком в React или React+NodeJs в целом по хардам крепкий джун, но при этом хорошо решает бизнес задачи, есть аналитическое мышление.
Кому не сложно, закиньте вашим HR, поможем всем миром, как говориться :)
ЛС Паши @eremenko_pa
#frontend #react #nodejs #nestjs #резюмешка
👍3