Введение в API Web Workers JavaScript

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

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

Читайте также: Понимание синхронного и асинхронного JavaScript

Случаи использования
Допустим, есть скрипт, который выбирает и обрабатывает файл. Если файл значительно большой это займет много времени для обработки! Который может остановить другие сценарии, которые были вызваны позже от выполнения.

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

Сценарий, выполняемый в фоновом рабочем потоке, называется рабочим сценарием или просто рабочим.

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

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

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

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

Глобальная область действия рабочего потока отличается от основного потока. Вы не можете получить доступ к методам и свойствам окно такой объект, как alert () внутри рабочего потока. Вы также не можете изменить DOM напрямую из рабочего потока.

Тем не менее, вы Можно используйте много API, которые находятся под окном, например Promise и Fetch, в вашем рабочем потоке (см. Полный список).

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

Есть также много типы рабочих. Два главных из них – преданные и общие работники.

Выделенные работники принадлежат к тому же контексту просмотра, к которому принадлежит их основной поток. Совместно используемые работники, однако, присутствуют в другом контексте просмотра (например, в iframe) из основного сценария. В обоих случаях основной сценарий и рабочие должны находиться в одном домене.

Пример в этом уроке будет о выделенном работнике, который является наиболее распространенным типом.
Методы API
На диаграмме ниже приведен краткий обзор всех основных методов, составляющих API Web Workers.
Рабочий () Конструктор создает выделенный рабочий поток и возвращает его ссылочный объект. Затем мы используем этот объект для связи с этим конкретным работником.

PostMessage () Метод используется как в основном, так и в рабочем сценариях для отправки данных друг другу. Отправленные данные затем принимаются на другой стороне OnMessage обработчик события.

прекратить () Метод завершает рабочий поток из основного скрипта. Это прекращение является немедленным: любое текущее выполнение сценария и ожидающие выполнения сценарии будут отменены. близко() Метод делает то же самое, но он вызывается рабочим потоком, закрывающим себя.
Пример кода
Теперь давайте посмотрим пример кода. Страница index.html содержит основной скрипт внутри

Начнем с создания рабочего потока из основного скрипта.

w = новый работник ('worker.js');

Конструктор Worker () принимает URL рабочего файла в качестве аргумента.

Затем мы добавляем обработчик событий для события onmessage вновь созданного рабочего экземпляра, чтобы получать от него данные. Свойство data события e будет содержать полученные данные.

w = новый работник ('worker.js');
w.onmessage = (e) => {
  console.log (Получено от работника: $ {e.data});
}

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

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

document.querySelector ('button'). onclick = () => {
  w.postMessage ( 'Джон');
}

Я просто отправляю строковое значение в рабочий поток.

В рабочем потоке нам нужно добавить обработчик события onmessage, который будет получать данные, отправленные ему основным скриптом при нажатии кнопки. Внутри обработчика мы объединяем полученную строку с другой и отправляем результат обратно в основной скрипт.

console.info («работник создан»);
onmessage = (e) => {
  postMessage (Hi $ {e.data});
}

В отличие от основного сценария, где нам пришлось использовать ссылочный объект w для ссылки на конкретный рабочий поток, в котором сценарий затем использует методы onmessage и postMessage, нет необходимости в ссылочном объекте в рабочем потоке для указания на основной поток ,

Код работает следующим образом. Когда браузер загружает index.html, консоль будет отображать сообщение «работник создан», как только в главном потоке будет выполнен конструктор worker (), создающий нового работника.

Когда вы нажимаете кнопку на странице, вы получаете сообщение «Получено от работника: Привет, Джон» в консоли, которое представляет собой строку, которая была объединена в рабочем потоке с данными, отправленными на нее, а затем была отправлена ​​обратно. к основному сценарию.

Читайте также: Начало работы с обещаниями JavaScript