Какие знаешь воркеры?

Веб-воркеры в JavaScript: типы, особенности и применение

В контексте Frontend Development под "воркерами" (workers) обычно понимают веб-воркеры — механизмы выполнения кода в параллельных потоках, отделённых от основного потока браузера (UI thread). Они позволяют выполнять тяжелые вычисления, обработку данных или операции I/O без блокировки интерфейса. Я выделю три основных типа, их отличия и практическое применение.

1. Dedicated Worker (Отдельный воркер)

Это классический воркер, связанный с одним конкретным скриптом (например, созданным в основном окне). Он не может взаимодействовать с другими окнами или воркерами напрямую.

Создание и использование:

// Основной поток (main.js)
const worker = new Worker('worker-script.js');

// Отправка данных воркеру
worker.postMessage({ task: 'calculate', data: largeArray });

// Получение результата от воркера
worker.onmessage = (event) => {
    console.log('Result:', event.data);
};

// Обработка ошибок
worker.onerror = (error) => {
    console.error('Worker error:', error);
};

// Воркер (worker-script.js)
self.onmessage = (event) => {
    const { task, data } = event.data;
    if (task === 'calculate') {
        // Выполняем тяжелые вычисления
        const result = performComplexCalculation(data);
        self.postMessage(result);
    }
};

Ключевые ограничения: Нет доступа к DOM, window, document. Общение только через postMessage и события. Идеально для задач типа:

• Обработка изображений/видео
• Сложные математические вычисления
• Парсинг больших JSON/данных

2. Shared Worker (Общий воркер)

Может быть использован несколькими скриптами (из разных окон, фреймов или воркеров), если они находятся в одном домене. Это позволяет организовать общее состояние или канал связи между разными контекстами.

Пример создания и подключения:

// В нескольких окнах можно подключиться к одному воркеру
const worker = new SharedWorker('shared-worker.js');

worker.port.onmessage = (event) => {
    console.log('Shared data:', event.data);
};

// Необходимо явно стартовать порт
worker.port.start();

// Отправка сообщения
worker.port.postMessage({ from: 'Window1', action: 'sync' });

// shared-worker.js
let connections = [];

self.onconnect = (event) => {
    const port = event.ports[0];
    connections.push(port);

    port.onmessage = (msg) => {
        // Ретрансляция сообщения всем подключенным клиентам
        connections.forEach(conn => conn.postMessage(msg.data));
    };
};

Основное применение: Реализация общих сервисов, например:

• Общий пул данных для нескольких открытых окон приложения
• Синхронизация состояния между табами браузера
• Централизованный логгер или мониторинг

3. Service Worker (Сервисный воркер)

Это более продвинутый тип, действующий как сетевой прокси между приложением и сетью. Он работает в отдельном контексте и может управлять кэшированием, push-уведомлениями, фоновой синхронизацией.

Регистрация и жизненный цикл:

// Основной скрипт приложения
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
        .then(registration => {
            console.log('SW registered:', registration.scope);
        })
        .catch(error => {
            console.error('SW registration failed:', error);
        });

    // Использование после регистрации
    navigator.serviceWorker.ready.then(() => {
        // Можно отправлять сообщения
        navigator.serviceWorker.controller.postMessage({ type: 'CACHE_UPDATE' });
    });
}

// sw.js (сервисный воркер)
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('v1').then(cache => {
            return cache.addAll(['/app.css', '/main.js']);
        })
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    );
});

self.addEventListener('message', event => {
    if (event.data.type === 'CACHE_UPDATE') {
        // Обновление кэша
    }
});

Ключевые возможности Service Worker:

• Precaching (предварительное кэширование ресурсов при установке)
• Runtime caching (динамическое кэширование запросов)
• Background sync (отложенная отправка данных при восстановлении сети)
• Push notifications (уведомления даже при закрытой странице)

Сравнительная таблица

Практические рекомендации и ограничения

1. Передача данных: Используйте postMessage с соблюдением правил сериализации (структуры данных клонируются или передаются по ссылке через Transferable объекты типа ArrayBuffer).

   // Эффективная передача большого буфера
   const largeBuffer = new ArrayBuffer(1024 * 1024);
   worker.postMessage(largeBuffer, [largeBuffer]); // Буфер передаётся, не клонируется
   

2. Ограничения среды: Воркеры выполняются в изолированном контексте, имеют доступ только к ограниченному набору API (например, fetch, WebSocket, но не localStorage). Для хранения данных используют IndexedDB.

3. Организация кода: Для сложных проектов воркеры можно организовывать как модули (с поддержкой importScripts или, в современных браузерах, с использованием ES6 modules через new Worker('...', { type: 'module' })).

4. Отладка: В DevTools воркеры отображаются отдельно в панели "Threads" или "Service Workers", что позволяет анализировать их выполнение, сетевые запросы (для Service Worker) и обмен сообщениями.

Выбор типа воркера зависит от задачи: Dedicated — для тяжелых вычислений в контексте одного окна, Shared — для межоконного взаимодействия, Service — для улучшения производительности и offline-возможностей приложения (PWA). Их правильное использование критически важно для создания высокопроизводительных frontend-приложений.