HTML API Веб-вокеров

Веб‑воркер — это внешний файл JavaScript, который выполняется в фоновом режиме, не влияя на производительность страницы.

Что такое веб‑воркер?

При выполнении скриптов на HTML‑странице страница становится неотзывчивой до тех пор, пока выполнение скрипта не завершится.

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

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

Поддержка в браузерах

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает API веб‑воркеров.

API
Веб-воркеры	4.0	10.0	3.5	4.0	11.5

Пример использования API веб‑воркеров

В примере ниже создаётся простой веб‑воркер, который считает числа в фоновом режиме:

Пример

Счёт чисел:

Примечание: Обычно веб‑воркеры не используют для таких простых скриптов — они предназначены для задач, интенсивно нагружающих процессор!

Проверка поддержки API веб‑воркеров

Перед использованием веб‑воркера можно быстро проверить поддержку его браузером:

Пример

Проверка поддержки браузером:

<script>
const x = document.getElementById("result");
if (typeof(Worker) !== "undefined") {
  x.innerHTML = "Ваш браузер поддерживает веб‑воркеры!";
} else {
  x.innerHTML = "К сожалению, ваш браузер не поддерживает веб‑воркеры.";
}
</script>

Создание файла веб‑воркера (.js)

Теперь создадим веб‑воркер во внешнем файле JavaScript.

Здесь мы создаём скрипт для подсчёта чисел. Скрипт сохраняется в файле demo_workers.js:

var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()", 500);
}

timedCount();

Примечание: Важная часть приведённого кода — метод postMessage(). Он используется для отправки сообщений обратно на HTML‑страницу.

Создание объекта веб‑воркера

После того как мы создали файл веб‑воркера (.js), мы можем вызвать его из HTML‑страницы.

Следующие строки проверяют, существует ли уже воркер (w), а если нет — создают новый объект веб‑воркера и указывают на файл .js: demo_workers.js:

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

Затем мы можем отправлять и получать сообщения от веб‑воркера.

Данные передаются между веб‑воркерами и основным потоком через систему сообщений: обе стороны отправляют сообщения с помощью метода postMessage(), а реагируют на сообщения через обработчик событий onmessage.

Добавьте обработчик события onmessage к объекту веб‑воркера:

w.onmessage = function(event) {
  document.getElementById("result").innerHTML = event.data;
};

Когда веб‑воркер в файле .js отправляет сообщение, выполняется код внутри обработчика событий. Данные от веб‑воркера сохраняются в event.data.

Завершение работы веб‑воркера

Когда объект веб‑воркера создан, он будет продолжать ожидать сообщений до тех пор, пока его не завершат.

Чтобы завершить работу объекта веб‑воркера и освободить ресурсы браузера/компьютера, используйте метод terminate():

w.terminate();

Повторное использование веб‑воркера

Если после завершения работы веб‑воркера установить для переменной веб‑воркера значение undefined, вы сможете повторно использовать воркер/код:

w = undefined;

Полный пример использования веб‑воркера

Мы уже видели код веб‑воркера в файле .js. Ниже приведён полный код для HTML‑страницы:

Пример

<!DOCTYPE html>
<html>
<body>

<p>Счёт чисел: <output id="result"></output></p>
<button onclick="startWorker()">Запустить воркер</button>
<button onclick="stopWorker()">Остановить воркер</button>

<script>
let w;

function startWorker() {
  const x = document.getElementById("result");
  if (typeof(Worker) !== "undefined") {
    if (typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      x.innerHTML = event.data;
    };
  } else {
    x.innerHTML = "К сожалению! Поддержка веб‑воркеров отсутствует.";
  }
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

Веб‑воркеры и DOM

Поскольку веб‑воркеры находятся во внешних файлах .js, у них нет доступа к следующим объектам JavaScript:

объект window;
объект document;
объект parent.