Web Workers API

Автор:Игорь Тельменко

Web Workers API

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

Доступность в браузерах по данным CanIUse

С создавшим его кодом каждый Web Worker общаеся через отправку событий.

Есть разные типы вокеров. Простейшим является выделенный воркер.

Создание и взаимодействие

Создание выделенного воркера происходит просто:

Здесь проверяется доступность Web Wokres API и создается воркер из файла worker.js, а также добавляется обработка событий от воркера.

Код worker.js может содержать функцию onmessage для приема данных от основного js кода:

Если первый код вставить в index.html между тегами script, а второй кусок кода поместить в wokrer.js, то запустив index.html мы получим в консоли браузера сообщения:

У MDN есть пример simple-web-worker. И demo. Там код лишь немного сложнее. Показаны 2 воркера.

Worker-ы могут запускать другие worker-ы. Главное чтобы политика одного источника (в браузере) соблюдалась.

Также из воркеров имеется доступ к функции importScripts("foo.js", "bar.js" ...); для загрузки скриптов извне. Загрузка должна быть только с того же домена.

Ограничения

В воркере нельзя обращаться к DOM. Нет доступа к localStorage. Эти вещи можно делать только передав событие основному коду, который сделает все что нужно.

Разделяемые воркеры

Разделяемый воркер доступен нескольким разным скриптам — даже если они находятся в разных окнах, фреймах или даже воркерах.

Создается такой воркер похожим образом:

Как видно, в данном случае используется конструктор SharedWorker.

С разделяемым worker-ом необходимо взаимодействовать через объект port — явно открыв порт, с помощью которого скрипты могут взаимодействовать с worker-ом. Для выделенного worker-а это происходит тоже, но неявно (через onmessage).

Соединение с портом должно быть осуществлено либо неявно, используя обработчик событие onmessage, либо явно, вызвав метод start() перед тем, как отправлять любые сообщения.

Например, в родительском потоке можно

При этом на стороне воркера:

В родительском потоке:

Таким образом, если раньше у нас был 1 обработчик данных в воркере, то теперь их может быть много с разным функционалом. Что может быть использовано для связи с различными скриптами.

Передача данных в воркеры и из них

Данные в воркеры и из них передаются копированием при помощи сериализации. По ссылке данные не передаются. Однако у Chrome 17+ и Firefox 18+ имеется возможность передать некоторые типы объектов по ссылке. Это объекты, которые реализуют интерфейс Transferable. Пока что это только ArrayBuffer и MessagePort.

Чтобы передать таким образом параметр необходимо воспользоваться вторым аргуметом метода postMessage:

Другие типы воркеров

Имеются развноидности воркеров.

  • ServiceWorkers - служат для реализации работы приложений в условиях потери связи. С помощью них можно реализовать выдачу закешированного результата. А также push-уведомления, и фоновую синхронизацию. caniuse
  • Chrome Workers - это воркеры которые используются при разработке расширений к браузеру Firefox.
  • Audio Workers для работы с audio потоком из воркеров. Но не рализованы пока в браузерах
  • Встроеные воркеры

Оставить ответ