JavaScript — однопоточный? Да, но это не приговор!
Когда-то JS мог делать только одну операцию за раз, из-за чего сложные вычисления "замораживали" интерфейс. Но сегодня Web Workers, SharedArrayBuffer и другие технологии позволяют запускать параллельные вычисления прямо в браузере!
В этой статье разберём:
- Как устроена однопоточность JS и почему Event Loop — не всегда решение.
- Web Workers — фоновые потоки без блокировки интерфейса.
- Когда многопоточность ускоряет код, а когда только мешает.
- Альтернативы Workers — WASM, Service Workers, OffscreenCanvas.
⚡ Почему JavaScript однопоточный?
JavaScript создавался для простых скриптов в браузере, где:
- Главный поток отвечает за отрисовку DOM, обработку событий и JS-код.
- Блокировка потока = зависание страницы.
Event Loop спасает, но не решает всех проблем:
Вывод:
Вывод: setTimeout не делает код асинхронным — он лишь откладывает выполнение, но если главный поток занят, колбэк ждёт!
🚀 Web Workers: настоящая многопоточность
Workers — это отдельные JS-потоки, которые работают параллельно с основным.
Как создать Worker?
- worker.js
2. main.js
🔥 Где Workers ускоряют приложение?
- Обработка изображений/видео (например, фильтры в Canvas).
- Сложная математика (физика в играх, ML-модели).
- Парсинг больших данных (CSV, JSON).
⚡ Ограничения Workers
❌ Нет доступа к DOM (нельзя изменить HTML напрямую).
❌ Нет window, document (но есть self и fetch).
❌ Обмен данными только через postMessage (копирование, а не общая память).
💡 SharedArrayBuffer: общая память между потоками
Если Workers копируют данные (медленно), то SharedArrayBuffer позволяет потокам работать с одной областью памяти:
⚠️ Важно:
- Требует заголовка Cross-Origin-Opener-Policy: same-origin (безопасность).
- Риск гонки данных (используйте Atomics для синхронизации).
🚀 Альтернативы Workers
1. Service Workers (для фоновых процессов)
- Кэширование, офлайн-режим, push-уведомления.
- Работает даже после закрытия вкладки!
2. OffscreenCanvas (анимации без блокировки UI)
3. WebAssembly (WASM)
- Запуск C++, Rust в браузере.
- Подходит для супер-тяжёлых вычислений.
📊 Когда НЕ нужна многопоточность?
- Маленькие задачи (накладные расходы на создание Worker > выгода).
- Частый обмен данными (копирование между потоками тормозит).
- Простая асинхронность (хватит Promise + async/await).
💡 Вывод: как правильно использовать многопоточность?
✔️ Web Workers — для долгих вычислений без DOM.
✔️ SharedArrayBuffer — если нужна общая память (осторожно с синхронизацией!).
✔️ Service Workers — для фоновых задач (кэш, push).
✔️ WASM — максимум производительности для сложных алгоритмов.
Пример: Допустим, вы делаете фоторедактор:
- Основной поток — интерфейс, кнопки.
- Worker — применение фильтров к изображению.
- Service Worker — кэширует пресеты.
- WASM — нейросеть для автоматической ретуши.
🚀 Попробуйте многопоточность в своём проекте!
Какой подход вам кажется самым перспективным?
- 🔥 Web Workers
- ⚡ WASM
- 📡 Service Workers
Делитесь в комментариях!