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

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

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

Случаи применения

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

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

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

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

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

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

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

Области применения и виды работников

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

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

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

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

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

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

Пример в этом уроке будет о преданном работнике, который является наиболее распространенным типом.

Методы API

Смотрите ниже диаграмму для краткий обзор всех основных методов которые составляют API Web Workers.

Рабочий () конструктор создает выделенный рабочий поток а также возвращает свой ссылочный объект. Затем мы используем этот объект для связи с этим конкретным работником.

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

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

Пример кода

Теперь давайте посмотрим пример кода. index.html страница содержит основной сценарий внутри

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

  w = новый работник ('worker.js'); 
  Рабочий () конструктор принимает URL рабочего файла в качестве аргумента.
 Затем мы добавляем обработчик события для OnMessage Событие недавно созданного рабочего экземпляра в получить данные от него.  данные собственность е событие будет содержать полученные данные.
  w = новый работник ('worker.js'); w.onmessage = (e) => console.log ('Получено от работника: $ e.data');  
 Теперь мы используем PostMessage () в отправить некоторые данные в рабочий поток по нажатию кнопки. PostMessage () Метод может принимать два аргумента. Первый может быть любого типа (строка, массив ...). Это данные быть отправленным в рабочий поток (или к основному сценарию, когда метод присутствует в рабочем потоке).
 Второй необязательный параметр - это массив объектов, которые могут быть использованы рабочими потоками (но не по основному сценарию или наоборот). Эти виды объектов называются переводный объекты.
  document.querySelector ('button'). onclick = () => w.postMessage ('john');  
 Я просто отправляю строковое значение в рабочий поток.
 В рабочем потоке нам нужно добавить OnMessage обработчик событий, получит данные отправлено ему главным скриптом по нажатию кнопки. Внутри обработчика мы объединить полученную строку с другой и отправить результат обратно в основной скрипт.
  console.info («работник создан»); onmessage = (e) => postMessage ('Hi $ e.data');  
 В отличие от основного сценария, где мы должны были использовать вес ссылка на объект обратитесь к конкретному рабочему потоку на котором сценарий затем использует OnMessage а также PostMessage методы, есть нет необходимости в ссылочном объекте в рабочем потоке указать на основной поток.
 Код работает следующим образом. Когда браузер загружается index.html, консоль покажет "рабочий создан" сообщение, как только Рабочий () конструктор выполняется в основном потоке, создание нового работника.
 Когда вы нажмете кнопку на странице, вы получите "Получено от работника: Привет, Джон" сообщение в консоли, которая является строкой, которая была сцеплены в рабочем потоке с данными, отправленными на него, а затем был отправлено обратно в основной скрипт.