JavaScript Academy · Урок

Создание Web Worker

Запускайте фоновый поток для выполнения задач.

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

Зачем нужны веб-воркеры

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

Создание воркера

Создайте воркер, передав URL скрипта конструктору Worker. Браузер загрузит этот file и выполнит его в отдельном потоке.

const worker = new Worker('worker.js');
// The code in worker.js now runs on its own thread.

Скрипт worker

Файл worker содержит обычный JavaScript, но выполняется в собственной глобальной области видимости — без window и без document. Он взаимодействует с остальными частями приложения только через сообщения.

// worker.js
console.log('worker started');
// This runs off the main thread.

Две отдельные глобальные области

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

Основной поток: window, DOM, пользовательский интерфейс
Поток worker: self, вычисления, без DOM

Объект self в worker

Внутри worker глобальным объектом является self — объект типа DedicatedWorkerGlobalScope. На нём можно назначать обработчики и вызывать методы, хотя self часто подразумевается неявно.

// worker.js
self.addEventListener('message', (e) => {
  console.log('worker got:', e.data);
});

Модульные воркеры

Можно создать worker, использующий ES-модуль import, передав опцию type: 'module'. Это позволяет worker удобно импортировать другие модули.

const worker = new Worker('worker.js', { type: 'module' });
// Inside worker.js you can now use import statements.

Импорт скриптов (классический вариант)

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

// Inside a classic worker:
importScripts('math-utils.js', 'helpers.js');
// Their globals are now available in the worker.

Завершение работы worker

Остановите worker из основного потока с помощью worker.terminate(), а изнутри — с помощью self.close(). Это освобождает поток и его память.

// From the main thread:
worker.terminate();

// From inside the worker:
// self.close();

Обработка ошибок worker

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

worker.addEventListener('error', (e) => {
  console.log('worker error:', e.message, 'at line', e.lineno);
});

Требование одного источника

Скрипт worker должен предоставляться из того же источника, что и страница, либо через URL объекта Blob. Нельзя напрямую загрузить worker по произвольному URL из другого источника.

// Same-origin file path - works:
const w1 = new Worker('/js/worker.js');

// You can also build one from a Blob URL when needed.

Выделенные и общие воркеры

Worker является выделенным: он связан со страницей, которая его создала. К SharedWorker могут обращаться несколько страниц одного источника. В этом курсе рассматриваются выделенные воркеры.

Быстрая проверка

Проверьте, насколько хорошо вы поняли создание веб-воркеров.

Повторение

Вы научились создавать веб-воркеры:

new Worker('worker.js') запускает фоновый поток.
У worker есть собственный глобальный объект (self) и нет DOM.
Используйте type: 'module' для импорта или importScripts в классических worker.
terminate() / self.close() останавливают его.
Worker должен находиться в том же источнике.

Далее — обмен сообщениями между потоками.

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

Урок «Создание Web Worker» бесплатный?

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

Чему я научусь в уроке «Создание Web Worker»?

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

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

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

Сколько времени занимает урок «Создание Web Worker»?

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

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

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

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

← Назад к JavaScript Academy