Люблю итоги года, хочу чтоб их стало ещё больше и они были везде. Классно смотреть на статистику и аналитику в разных приложениях с которыми я взаимодействую, жаль что вообще не все аппки делают такое.
Так что предлагаю итоги года для всех приложений подряд:

🛍 Озон
— Показывать стату сколько раз ты проверял в отслеживании доставки свой товар и рефрешил страницу с заказом.
— Показывать страницу товара на который ты чаще всего заходил, проверял цену и уходил в итоге не купив его

🛍 ВБ
— Хайлайты самых популярных боёв на ПВЗ которые вам понравились

📺 Кинопоиск
— Сколько раз был закрыт попап на главной

📝 DTF
— Среднее время чтения заголовка перед переходом в каменты

📺 ВК Видео
— Количество часов в год проведенных в ожидании загрузки главной

💳 Т-Банк
— Количество миллисекунд, потраченное на случайное открытие сторис.

🍔 Яндекс Еда
— Сумма всех стоимостей доставок перед тем как удалить корзину и закрыть приложение.

🛴 Whoosh
— Самые крутые фотки самокатов

📞 Мегафон
— Таблица-рейтинг абонентов которые больше всего писали в чат «оператор»

📞 Ростелеком
— Количество дней проведенных в ожидании оператора

💬 Telegram
— % сохраненных постов и сообщений которые больше 1 раза не смотрели
Вообще с телегой хотелось бы больше всего обычной статы: сколько диалогов было за год, сколько стикеров отправлено, сколько раз нажималась кнопка заблокировать и тому подобное.

🔦 Фонарик
— Сколько раз за год был включен фонарь + продолжительность и средняя стата

Granbrax Italic

Free for personal use.

⬇️Download: https://t.me/ZIP_Files/772

💬 Event Loop в Node.js VS в браузере

Многие считают, что event loop в Node.js и браузере работает одинаково. Однако, несмотря на общие черты, существуют важные различия, которые влияют на асинхронное поведение и производительность приложения. Разобравшись с этими различиями, можно писать более эффективный асинхронный код и избежать лагов и задержек. Давайте разберемся, что именно отличает работу event loop в этих двух средах.

❌ Браузер: всё о пользовательском интерфейсе

В браузере event loop сосредоточен на работе с пользовательским интерфейсом (UI). Его основная задача — обеспечить плавность рендеринга, быстроту реакции на события, выполнение JavaScript и обработку Web APIs.

В процессе работы с UI браузер использует несколько типов очередей задач. Это microtasks, такие как обработка Promise и queueMicrotask, и macrotasks, в которые попадают setTimeout, setInterval и MessageChannel. Также есть отдельная фаза для рендеринга. Браузер обязан поддерживать плавность UI, поэтому между макротасками он обязательно вставляет фазу рендеринга, что позволяет минимизировать задержки при обновлении интерфейса.

❌ Node.js: event loop от libuv

В Node.js event loop работает на основе библиотеки libuv, которая используется для асинхронных операций, таких как работа с файловой системой, сетью и другими I/O операциями. В отличие от браузера, в Node.js есть несколько фаз, которые позволяют эффективно управлять этими операциями.

Node.js использует шесть фаз, включая Timers (setTimeout, setInterval), Poll (обработка I/O операций), Check (setImmediate) и другие. Основное отличие заключается в том, что Node.js управляет низкоуровневыми операциями с системой, такими как файлы и сеть, в то время как браузер сосредоточен на рендеринге и UI. Это позволяет Node.js быть более гибким в обслуживании серверных запросов и файловых операций.

❌ Где начинается путаница

Существует несколько распространенных недопониманий между setTimeout и setImmediate. В браузере нет метода setImmediate, в то время как в Node.js он выполняется в фазе Check, а setTimeout — в фазе Timers. Это может привести к путанице, особенно при переносе кода между Node.js и браузером.

Также стоит отметить различие в работе microtasks. В браузере микротаски выполняются сразу после каждого макротаска, а в Node.js они выполняются после каждой фазы event loop, что позволяет их более эффективно управлять и избегать блокировки цикла.

❌ Ещё одним важным отличием является рендеринг

В Node.js нет рендеринга, так как он работает в серверной среде и не требует обновления визуальной части. В браузере, наоборот, рендеринг влияет на порядок выполнения задач и может вызвать задержки, если не правильно управлять этим процессом.

Например, repaint может произойти между macrotask, microtask и снова macrotask, что важно учитывать при оптимизации производительности в браузере.

❌ Что важно помнить разработчику

• В Node.js основное внимание уделяется I/O операциям, таким как работа с файлами, сетью и процессами. Эти задачи добавляют свои очереди и обрабатываются в разных фазах event loop.
• В браузере event loop синхронизирован с частотой кадров, что критически важно для обеспечения плавности UI.
• Microtasks в Node.js ведут себя агрессивнее, особенно process.nextTick, который может заблокировать переход между фазами event loop, если заспамить его слишком большим количеством задач.
• setImmediate и setTimeout — это не одно и то же. Порядок их выполнения в Node.js зависит от контекста и фазы event loop, в которой они находятся.

📌 Знание этих различий позволяет избежать лагов и писать эффективный асинхронный код, который будет работать предсказуемо как в браузере, так и в серверной среде Node.js.

🚪 Frontender's notes