Web Workers в JavaScript: Параллельные вычисления и улучшение производительности

Worker мы получили, далее рассмотрим основные функции для обмена данными между потоками

postMessage(message: any, transfer: Transferable[]): void — метод для отправки сообщения из одного потока в другой.

• message — любое значение или объект, который может быть обработан алгоритмом структурного клонирования, если коротко, то этот алгоритм продвинутее чем JSON сериализатор, например он может клонировать — Blob, File, ImageData, Buffers, может восстанавливать циклические ссылки, но не умеет в клонирование свойств и прототипов и не работает с Error, Function, DOM Elements.

• transfer — массив объектов(объекты могут быть только ArrayBuffer | MessagePort | ImageBitmap), которые перенесутся в контекст worker и больше не будут доступны в изначальном потоке, это может помочь при копировании большого объема данных, чтобы не потерять в производительности и памяти.

// Тут мы передаем buffer в контекст worker, в этом скрипте он больше не будет доступен  const buffer = new ArrayBuffer(42); const data = { text: 'Hello, World!', buffer }; worker.postMessage(data, [buffer]);

onmessage: ((this: Worker, event: MessageEvent) => any) | null — слушатель отправки message.

• event — объект события полученный от worker/main thread

interface MessageEvent<T = any> extends Event {     // Переданные данные     readonly data: T;     // Последний идентификатор события (event ID) в случае событий, связанных с сервером     readonly lastEventId: string;     // Origin сообщения, используется, при работе с событиями связанными cross-document messaging, и позволяет определить источник отправителя сообщения.     readonly origin: string;     // Порты, по сути, открытые нами страницы, используются для обмена данными и сообщениями между веб-воркерами и основными потоками.     readonly ports: ReadonlyArray<MessagePort>;     // Предоставляет информацию об отправителе сообщения, такую как, например, какое окно отправило событие     readonly source: MessageEventSource | null; }

Пример использования

Покажу пример использования Dedicated Worker, на примере работы с изображением(пример максимально абстрактный, без конкретных реализаций, но демонстрирует некоторые возможности).

Допустим вы пишете какое‑то подобие google docs и хотите сжимать картинку, если она больше определенного размера, и при этом не блокировать основной поток.

В основном потоке хэндлим событие выбора юзером файла изображения, отправляем его в Worker, и когда приходит обработанное изображение из Worker, добавляем эту картинку на страницу.

const imageProcessingWorker = new Worker('worker.js');  const imageSelect = document.getElementById('image-select');  imageSelect.addEventListener('change', function(event) {   const selectedImage = event.target.files[0];   imageProcessingWorker.postMessage(selectedImage); });  imageProcessingWorker.onmessage = function(event) {   const processedImage = event.data;   const imageContainer = document.getElementById('image-container');   imageContainer.appendChild(processedImage); };

self.onmessage = function(event) {   const image = event.data;   // Функция, которая производит какие-то преобразования с картинкой, например сжатие   const processedImage = processImage(image)      self.postMessage(processedImage); }; 

Убийство Dedicated Worker

1. Когда Dedicated Worker вам больше не нужен, его можно убить с помощью worker.terminate().

2. Dedicated Worker сам уничтожится, когда вы закроете вкладку с ним.

Use Cases

• Обработка видео/аудио/картинок — ресайз, наложение фильтров и кодирование/декодирование медиаданных и тд.

• Загрузка, обработка и сохранение больших файлов.

• 3D-графика и различные анимации.

• Маппинг больших данных, например списков/различные сортировки и тд.

Можно самому ради интереса поискать Workers на сайтах, например, с помощью devtools: sources → threads → smth with workers.js

Как работать с Shared Workers ?

Shared Worker работает похожим образом с Dedicated Worker, однако тут все взаимодействие проходит через port: MessagePort, и соответсвенно из‑за этого у нас появляется listener onconnect в файле Worker’a. Общий workflow выглядит следующим образом:

1. Инициализируем Shared Worker с помощью конструктора в наших файлах(в этом примере их 2)

2. Получаем port нашего Shared Worker’a

3. Делаем port.postMessage() из Main Threads

4. Устанавливаем connect с Main Threads из Worker Thread, с помощью onconnect

5. Получаем port из event’a, который прилетел нам на подключении, я пока рассматриваю случай, когда у меня 1 порт — const port = event.ports[0];, если у вас будет больше, выбирайте соответсвующий(порты создаются следующим образом — тык)

6. Worker с помощью port.postMessage отправляет событие обратно в Main Thread’s всем портам, на которых висит port.onmessage

7. Срабатывает listeners в Main Thread’s

Мы можем создавать сколько угодно потоков(при этом если мы создаем их из одного файла Worker’a, они будут иметь одинаковый контекст), главное чтобы хватило ресурсов ПК и мы не уперлись в ограничения браузера.

Инициализация Shared Worker

// new Worker('Путь до worker файла, относительно текущего файла') const worker = new SharedWorker('worker.js'); // тут у нас в worker есть объект port он используется для управления Shared Worker

SharedWorker имеет такие же сигнатуры функции для postMessage и listener onmessage, а также onconnect имеет такую же сигантуру как onmessage

postMessage(message: any, transfer: Transferable[]): void onmessage: ((this: Worker, event: MessageEvent) => any) | null onconnect: ((this: Worker, event: MessageEvent) => any) | null

Пример использования

Покажу пример использования Shared Worker: сделаем формочку, где можно будет вбить сообщение и оно появится на странице, и с помощью нашего Worker’a отобразим его сразу на двух страницах(index1.html, index2.html). Откройте обе странички, чтобы заценить.

Инициализируем наших Shared Worker’s в index1.html, index2.html, где

index1.html

1. Инициализируем Shared Worker, берем его port

2. При клике на кнопку Send отправляем в Shared Worker message, с помощью port.postMessage()

3. Создаем handleronmessage, в нем добавляем новую строку в наш контейнер с сообщениями

index2.html

1. Инициализируем Shared Worker, берем его port

2. Создаем handler onmessage, в нем добавляем новую строку в наш контейнер с сообщениями (тут не делаем нашей формочки, тут будет только список сообщений)

worker.js

1. Создаем массив, куда сложим все наши порты — ports(эти порты нам нужны, чтобы отправить сообщение сразу во все вкладки/iframe, где используется наш Worker, и отобразить там новое сообщение)

2. Создаем handler onmessage и отправляем сообщение на все наши ports

3. Вуаля, получаем на обеих страницах одинаковые messages

<!DOCTYPE html> <html>   <head>     <title>Shared Worker 1</title>   </head>   <body>     <div class="message-container"></div>     <input type="text" class="message-input" />     <button class="send-message-button">Send</button>     <script>       const messageContainer = document.querySelector('.message-container');       const messageInput = document.querySelector('.message-input');       const sendMessageButton = document.querySelector('.send-message-button');        const worker = new SharedWorker('worker.js');       const port = worker.port;        sendMessageButton.addEventListener('click', () => {         const message = messageInput.value;         port.postMessage(message);         messageInput.value = '';       });              port.onmessage = (e) => {         messageContainer.innerHTML += e.data + '<br>';       };     </script>   </body> </html> 

<!DOCTYPE html> <html>   <head>     <title>Shared Worker 2</title>   </head>   <body>     <div class="message-container"></div>     <script>       const messageContainer = document.querySelector('.message-container');            const worker = new SharedWorker('worker.js');       const port = worker.port;        port.onmessage = (e) => {         messageContainer.innerHTML += e.data + '<br>';       };     </script>   </body> </html> 

const ports = [];  self.onconnect = (event) => {   // Достаем порт с которого подключились и сохраняем его, чтобы потом отправить ему сообщение   const port = event.ports[0];   ports.push(port);    port.onmessage = (e) => {     const message = e.data;     for (const client of ports) {       client.postMessage(`Message: ${message}`);     }   }; }; 

Убийство Shared Worker

1. С помощью worker.close()

2. Когда закрыли все вкладки на которых был использован этот Shared Worker

Use Cases

• Все, что связано с обменом данными между вкладками и окнами приложения.

• Управление общими ресурсами.

• Все тоже самое, что и у Dedicated Workers

Итого

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

Если статья показалась вам интересной, то у меня есть Телеграм Канал, где я пишу про новые технологии во фронте, делюсь хорошими книжками и интересными статьями других авторов.