API Web Workers в HTML

HTML API для Web Workers

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

Что такое Web Worker?

Когда скрипт выполняется на HTML-странице, страница становится неотзывчивой, пока скрипт не завершится. Web worker — это внешний файл JavaScript, который выполняется в фоновом режиме независимо от других скриптов, не влияя на страницу, поэтому вы можете продолжать кликать и выбирать, пока он работает. Web workers полезны для «тяжёлого» кода, который иначе создавал бы длительные задачи и блокировал страницу.

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

API Web Workers поддерживается всеми современными браузерами (начиная с Chrome 4, Edge 10, Firefox 3.5, Safari 4 и Opera 11.5).

Пример API Web Workers

Простой web worker может считать числа в фоновом режиме, пока страница остаётся отзывчивой.

Примечание: Web workers обычно не используются для таких простых скриптов, а для более требовательных к процессору задач.

Проверка поддержки API Web Worker

Перед использованием web worker можно быстро проверить поддержку, протестировав typeof(Worker).

Пример

Проверка поддержки Web Worker.

Страница со скриптом, который проверяет, поддерживает ли браузер Web Workers (typeof Worker), и записывает сообщение о поддержке или её отсутствии в абзац с id result.

> Результат: полная HTML-страница

Prompt

Страница со скриптом, который проверяет, поддерживает ли браузер Web Workers (typeof Worker), и записывает сообщение о поддержке или её отсутствии в абзац с id result.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Проверка поддержки</title>
</head>
<body>

<p id="result"></p>

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

</body>
</html>

Создание файла Web Worker .js

Web worker находится во внешнем файле JavaScript. Вот скрипт, который считает, сохранённый в demo_workers.js.

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

demo_workers.js

Внешний файл worker'а, который считает и отправляет каждое число обратно.

var i = 0;

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

timedCount();

Создание объекта Web Worker

После создания файла .js вы вызываете его со страницы HTML. Код проверяет, существует ли уже worker, и если нет — создаёт его с помощью new Worker("demo_workers.js"). Данные передаются между worker'ом и основным потоком через сообщения: обе стороны отправляют их с помощью postMessage() и отвечают через обработчик события onmessage. Вы добавляете слушатель onmessage к объекту worker, и когда worker отправляет сообщение, слушатель запускается, а данные доступны в event.data.

Остановка Web Worker

После создания web worker продолжает слушать сообщения, пока не будет остановлен. Чтобы остановить его и освободить ресурсы, вызовите метод terminate().

Повторное использование Web Worker

Если после остановки задать переменной worker значение undefined, можно повторно использовать код worker'а.

Полный пример Web Worker

Ниже приведена полная HTML-страница, работающая с файлом worker'а, показанным ранее.

Пример

Полная страница, которая запускает и останавливает считающий web worker.

Полная страница, использующая веб-воркер: элемент output (id result) и кнопки «Запустить Worker» и «Остановить Worker». Запуск создаёт Worker из demo_workers.js (если он ещё не создан) и показывает сообщения через onmessage; Остановка завершает воркер и устанавливает его в undefined. Возвращается к запасному сообщению, если Web Workers не поддерживаются.

> Результат: полная HTML-страница

Prompt

Полная страница, использующая веб-воркер: элемент output (id result) и кнопки «Запустить Worker» и «Остановить Worker». Запуск создаёт Worker из demo_workers.js (если он ещё не создан) и показывает сообщения через onmessage; Остановка завершает воркер и устанавливает его в undefined. Возвращается к запасному сообщению, если Web Workers не поддерживаются.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Полноценный Worker</title>
</head>
<body>

<p>Счёт чисел: <output id="result"></output></p>
<button onclick="startWorker()">Запустить Worker</button>
<button onclick="stopWorker()">Остановить Worker</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 = "Извините! Нет поддержки Web Worker.";
  }
}

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

</body>
</html>

Web Workers и DOM

Поскольку web workers находятся во внешних файлах .js, они не могут получить доступ к объекту window, объекту document или объекту parent.