Web Worker: способ запуска скриптов в фоновом режиме в другом потоке, отличном от текущего основного (Window) потока.

1. Веб-работники против асинхронного использования event_loop
2. Введение в веб-воркеры
3. как создать веб-воркера
4. Например, с веб-работником
5. ограничение веб-воркеров
6. асинхронная операция в Web Workers

1. Веб-воркеры против асинхронных операций с использованием цикла событий

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

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

2. Введение в веб-воркеры

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

• Выделенные работники: используются одним сценарием и идеально подходят для разгрузки задач из основного потока.
• Общие рабочие процессы: доступны для нескольких скриптов, работающих в разных контекстах (например, в разных окнах или iframe).
• Service Workers: работает в качестве прокси-сервера между веб-приложениями, браузером и сетью, обеспечивая такие функции, как автономная поддержка и кэширование.

Эта статья посвящена специальным работникам, которые наиболее просты в реализации и широко используются.

3. Как создать веб-воркер

Чтобы создать веб-воркер, вы можете использовать следующие ключевые методы:

• new Worker(): конструктор для создания нового работника.
• postMessage(): отправляет сообщения из основного потока работнику или наоборот.
• onmessage: функция обратного вызова, предназначенная для обработки сообщений, полученных работником.
• terminate(): немедленно останавливает работника.

4. Простой пример

Давайте создадим рабочий процесс для получения данных из API, в частности изображений собак из API Dog CEO.

4.1 Рабочий кодекс

Вот реализация рабочего скрипта. Обратите внимание, что внутри работника self используется для ссылки на глобальный контекст:

if (window.Worker) {
    const worker = new Worker("/src/worker.js");
        worker.postMessage({ 
            operation: "get_dog_imgs",
            url: "https://dog.ceo/api/breeds/image/random", 
            count: 5   //number of photos
        });
        worker.onmessage = (e) => {
        console.log(e.data);
        if (e && e.data) {
            setdata((old) => [...old, e.data]); // update react state
            showCallStack(); // function to show the callstack 
        }
    };
    worker.onerror = (e) => {
        console.log(e);
    };
}

В этом коде исполнитель прослушивает сообщения (onmessage) и извлекает данные с заданного URL-адреса несколько раз, как указано счетчиком.

Вот как выглядит стек вызовов внутри работника:

4.2 Клиентский код

Основной поток использует рабочий процесс следующим образом:

self.onmessage = (event) => {
    const data = event.data;
    if (data && data.url && data.count) {
        fetchFromUrls(data.url, data.count);
    }
}
// fetch single data 
const fetchdata = async (url) => {
    const res = await self.fetch(url);
    return await res.json();
};

const fetchFromUrls = async (url, count) => {
    showCallStack(); // showing the callstack of the worker 
    for (const i of new Array(count).fill(0)) {
        let data = await fetchdata(url);
        if (data && data.message) {
            self.postMessage({ type: "img", data: data.message });
        }
    }
};

Этот код демонстрирует, как отправить сообщение работнику и получить полученные данные в основном потоке.

полный код см. в коде

5. Ограничения веб-воркеров

Хотя веб-работники выполняются в потоке, отдельном от потока главного окна, они имеют определенные ограничения:

• Нет доступа к DOM: работники не могут напрямую манипулировать DOM. Связь с основным потоком необходима для обновления пользовательского интерфейса.
• Потребление ресурсов: чрезмерное использование веб-воркеров может привести к чрезмерному использованию памяти, поскольку каждому работнику требуются дополнительные ресурсы для независимой работы.