Web-worker — это механизм, который позволяет вынести выполнение кода из главного потока браузера. Он доступен в браузерах уже более 10 лет. Проблема в том, что загрузка дополнительного кода в воркерах застряла в 2009 году — там используется синхронная функция loadScripts(), которая загружает код в глобальную область видимости модуля. Джейсон Миллер из Google рассказал про новый подход, который позволяет устранить недостатки старого подхода работы с модульным кодом в веб-воркерах — "Threading the web with module workers".

Новый подход использует ESM ( import/export ), тем самым автоматически подхватывая все преимущества загрузчика новой модульной системы (параллельная загрузка кода, предварительная загрузка и парсинг кода с помощью хинта modulepreload ). Тип воркера необходимо указывать при его создании, передавая дополнительный аргумент {type: 'module'}:

const worker = new Worker('worker.js', {
  type: 'module'
});

На данный момент поддержка module workers есть только в Chrome 80. Идёт работа над поддержкой ESM в service workers.

#esm #webworkers

https://web.dev/module-workers/

Взаимодействие с веб-воркером без прерывания цикла событий

Михай Парпарита поделился эффективным способом общения с веб-воркером без использования SharedArrayBuffer — "Communicating With a Web Worker Without Yielding To The Event Loop".

Автор статьи работал над веб-версией эмулятора ОС старых Макинтошей. Архитектура эмулятора разделена на две основные части: UI и поток эмуляции, работающий в веб-воркере. Чтобы эмуляция работала плавно, для обмена данными между UI и веб-воркером используется SharedArrayBuffer. Поддержка SharedArrayBuffer на данный момент отключена в Safari. Михай нашёл альтернативное решение.

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

Такой подход медленнее SharedArrayBuffer, но быстрее решения с остановкой цикла событий и позволяет достичь хорошей отзывчивости ввода в эмуляторе.

#api #webworkers

https://blog.persistent.info/2021/08/worker-loop.html