JavaScript Academy · Урок

Сценарии применения и ограничения

Узнайте, когда рабочие потоки помогают и чего они не умеют.

«Сценарии применения и ограничения» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Для чего подходят воркеры

Веб-воркеры особенно полезны, когда нужно выполнить ресурсоёмкую для CPU работу, которая иначе заморозила бы интерфейс:

Обработка изображений и видео
Разбор больших файлов (CSV, JSON)
Криптография и хеширование
Физические расчёты, анализ данных и моделирование

Нет доступа к DOM

Главное ограничение: worker не может обращаться к DOM. Объектов document и window нет. worker вычисляет данные и отправляет их обратно, а основной поток обновляет интерфейс.

// Inside a worker:
// document.querySelector(...) -> ReferenceError
// Workers have no DOM at all.

Что IS доступно

В worker по-прежнему доступны многие полезные API: fetch, setTimeout, WebSocket, IndexedDB, crypto и типизированные массивы. Поэтому получение данных и работа с хранилищем прекрасно выполняются в отдельном потоке.

// Inside a worker this is valid:
// const res = await fetch('/data.json');
// const json = await res.json();
// self.postMessage(json);

Ограничения структурированного клонирования

Помните, что сообщения копируются посредством структурированного клонирования. Нельзя отправлять функции, узлы DOM или экземпляры классов с методами — только их сериализуемые данные.

// Cannot be sent:
// worker.postMessage(() => {});      // function - fails
// worker.postMessage(document.body); // DOM node - fails

Стоимость запуска и обмена сообщениями

Создание worker и сериализация сообщений требуют дополнительных ресурсов. Для крошечных задач стоимость обмена сообщениями может превысить пользу. worker окупаются при значительной продолжительной работе.

Поддержание worker в работе

Создавать новый worker для каждой задачи расточительно. Повторно используйте долгоживущий worker и отправляйте ему множество сообщений либо поддерживайте небольшой пул worker для параллельного выполнения.

// Reuse one worker for many tasks:
const worker = new Worker('worker.js');
function run(task) {
  worker.postMessage(task);
}
// Avoid: new Worker(...) on every single call.

Пулы worker

Чтобы использовать несколько ядер CPU, создайте несколько worker и распределяйте между ними задачи. Отслеживайте, какие из них простаивают, и назначайте поступающую работу свободным worker.

const pool = [];
for (let i = 0; i < 4; i++) {
  pool.push(new Worker('worker.js'));
}
// Round-robin or queue tasks across the pool.

Совместное использование памяти

Для сложных случаев SharedArrayBuffer позволяет потокам напрямую совместно использовать память (с помощью Atomics для безопасного доступа). Для этого нужны специальные заголовки изоляции от источников, и этим механизмом легко воспользоваться неправильно.

// Requires COOP/COEP headers to be enabled.
// const shared = new SharedArrayBuffer(1024);
// Atomics.add(view, 0, 1); // safe concurrent update

Изоляция ошибок

Необработанная ошибка в worker не приводит к сбою страницы. Она проявляется как событие error у worker, которое следует обработать, чтобы записать ошибку в журнал или перезапустить worker.

worker.onerror = (e) => {
  console.log('worker failed:', e.message);
  // optionally recreate the worker here
};

Когда NOT следует использовать worker

Не используйте worker, если задача тривиальна, требует постоянных обновлений DOM или в основном сводится к ожиданию сети (асинхронный fetch уже не блокирует выполнение). Используйте их для настоящей работы с ограничением по CPU.

Объединение всего изученного

Веб-воркеры обменивают прямой доступ к DOM и простое совместное использование данных на настоящий параллелизм. Используйте их для тяжёлых вычислений, обменивайтесь данными через сообщения, повторно используйте worker и передавайте большие объекты buffer, чтобы приложение оставалось быстрым и плавным.

Проверка знаний

Проверьте, насколько хорошо Вы поняли варианты применения и ограничения worker.

Повторение

Вы изучили варианты применения и ограничения worker:

Они отлично подходят для ресурсоёмкой работы CPU, но не имеют доступа к DOM.
Доступны многие API (получение данных, IndexedDB, криптография).
Сообщения копируются посредством структурированного клонирования, поэтому функции и узлы DOM передавать нельзя.
Повторно используйте worker или пулы, чтобы распределить стоимость запуска.
Ошибки остаются изолированными в worker.

Вы завершили изучение веб-воркеров. Далее — IndexedDB.

Часто задаваемые вопросы

Урок «Сценарии применения и ограничения» бесплатный?

Да — полный текст урока «Сценарии применения и ограничения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Сценарии применения и ограничения»?

Узнайте, когда рабочие потоки помогают и чего они не умеют. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Сценарии применения и ограничения»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy