🤔 В чём разница в работе eventloop на сервере и в браузере?

Это механизм, используемый для обработки и выполнения асинхронных операций. Он позволяет JavaScript выполнять неблокирующие операции, несмотря на то, что JavaScript является однопоточным. Хотя принципы работы Event Loop в браузере и на сервере (например, в Node.js) схожи, есть некоторые важные различия в их реализации и окружении.

🚩Event Loop в браузере

В браузере Event Loop отвечает за обработку событий, выполнение асинхронного кода и обновление пользовательского интерфейса.

🟠DOM и рендеринг
Браузер должен обновлять и перерисовывать пользовательский интерфейс. Это включает в себя обработку изменений в DOM и применение стилей. Рендеринг обычно происходит между итерациями Event Loop.

🟠Очередь макрозадач
Включает такие задачи, как обработка пользовательских событий (нажатие кнопок, ввод текста), setTimeout, setInterval, сетевые запросы (XHR, fetch) и другие. Эти задачи обрабатываются в порядке их поступления.

🟠Очередь микрозадач
Включает такие задачи, как промисы (Promise), MutationObserver. Микрозадачи выполняются перед макрозадачами в рамках одной итерации Event Loop.

🟠UI события
Браузер должен обрабатывать события, связанные с пользовательским интерфейсом, такие как рендеринг и взаимодействие с пользователем.

🚩Event Loop в Node.js

Node.js, как серверная платформа, использует Event Loop для обработки асинхронных операций, таких как I/O, таймеры и сетевые запросы.

🟠Фазы Event Loop
Node.js Event Loop состоит из нескольких фаз, каждая из которых обрабатывает определённые типы задач: timers, I/O callbacks, idle, poll, check, и close callbacks.
🟠Timers
Эта фаза обрабатывает колбэки от setTimeout и setInterval.
🟠I/O callbacks
Обрабатывает почти все колбэки от асинхронных операций ввода-вывода, за исключением close callbacks, таймеров и setImmediate.
🟠Poll
Извлекает новые I/O события; выполняет I/O-колбэки (почти все, за исключением тех, которые закроют сервер); и если ничего не происходит, ждет в этой фазе.
🟠Check
Обрабатывает колбэки от setImmediate.
🟠Close callbacks
Обрабатывает колбэки от закрытия всех I/O операций.
🟠Microtasks (process.nextTick и Promises)
Выполняются после каждой фазы Event Loop, перед переходом к следующей фазе

🚩Различия

🟠Окружение
В браузере Event Loop управляет как асинхронными задачами, так и обновлением пользовательского интерфейса. В Node.js Event Loop больше ориентирован на обработку I/O операций и серверных задач.

🟠Фазы Event Loop
В браузере Event Loop менее детализирован по фазам по сравнению с Node.js. В Node.js Event Loop разделён на более детализированные фазы для обработки различных типов асинхронных задач.

🟠Микрозадачи
И в браузере, и в Node.js микрозадачи выполняются перед макрозадачами, но реализация и использование могут слегка отличаться.

🟠Рендеринг
В браузере Event Loop включает в себя шаги, связанные с рендерингом и обновлением DOM. В Node.js этого аспекта нет, так как он работает на сервере и не имеет дела с рендерингом пользовательского интерфейса.

Господи, да в чём проблема стать фронтендером?

Подписался на эти три канала:

👉 Фронтенд
👉 Верстка
👉 Node.JS

Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!

Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.

⚡️ Demo:Input Field Animation Floating Label | HTML & CSS

При вводе данных поле становится объёмным.

​​Turrit - на основе Telegram
(для iOS и Android)

Turrit является бесплатным сторонним клиентом, разработанным на основе Telegram API. В нем:
🔅 AI-переводчики
🚀 ускорение загрузки в 20 раз
💭 неограниченное облачное хранилище
🌏 онлайн-просмотр видео TikTok
💫 элегантный и простой интерфейс
⛓ защита безопасности и конфиденциальности

В настоящее время у Turrit уже более 100 000 ежедневных активных пользователей. В России он также пользуется признанием, вот в форуме 4PDA идет горячее обсуждение.

Скачать можно в Google Play и App Store.
Присоединяйтесь к официальной группе Turrit!

🖥 Анимированный контур кнопки для HTML-элемента, который останавливается при наведении на неё.

Эффект неонового свечения, подойдет для темной темы приложения.