HTML5 Веб‑воркер (веб-работник) API
Веб‑воркер (веб-работник) - это JavaScript, который работает в фоновом режиме, не влияя на продуктивность страницы.
Что такое веб‑воркер на веб‑странице?
Когда на HTML‑странице выполняются тяжёлые скрипты, страница может перестать отвечать, пока выполнение не завершится.
Веб‑воркер — это JavaScript, который работает в фоновом режиме, независимо от основного потока, не влияя на производительность страницы. Вы можете продолжать делать всё, что угодно — нажимать кнопки, выбирать элементы и т.д., пока веб‑воркер выполняет свою работу в фоне.
Поддержка браузерами
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает Web Workers.
| API | |||||
|---|---|---|---|---|---|
| Веб-воркеры | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Web Worker. Пример
Пример ниже создаёт простого веб‑воркера, который считает числа в фоновом режиме:
Проверьте поддержку веб‑воркера
Перед тем как создавать веб‑воркера, нужно убедиться, что браузер пользователя его поддерживает:
if (typeof(Worker) !== "undefined") {
// Да! Веб‑воркеры поддерживаются!
// Ваш код…
} else {
// К сожалению, веб‑воркеры не поддерживаются.
}
Создать файл веб‑воркера
Теперь давайте создадим веб‑воркера во внешнем JavaScript‑файле.
Здесь мы пишем скрипт, который выполняет подсчёт. Скрипт сохраняется в файле "demo_workers.js":
var i = 0;
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
Важной частью приведённого выше кода является метод postMessage(), который используется для отправки сообщения обратно на HTML‑страницу.
Примечание: Обычно веб‑воркеры не применяются для таких простых примеров. Их основная задача — выполнение тяжёлых, ресурсоёмких операций в фоновом режиме, чтобы не блокировать интерфейс страницы.
Создать объект веб‑воркера
Теперь, когда у нас есть файл веб‑воркера, нужно вызвать его из HTML‑страницы.
Следующий код проверяет, существует ли уже воркер. Если нет — создаётся новый объект веб‑воркера, который запускает выполнение файла "demo_workers.js":
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
Затем мы можем отправлять и получать сообщения от веб‑работника.
Добавьте к веб‑работнику обработчик события "onmessage".
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Когда веб‑работник отправляет сообщение, выполняется код в обработчике события. Данные веб‑работника находятся в event.data.
Завершить работу веб‑работника
Когда объект веб‑работника создан, он продолжает прослушивать сообщения (даже после завершения внешнего скрипта), пока не будет остановлен.
Чтобы прекратить работу веб‑работника и освободить ресурсы браузера/компьютера, используйте метод terminate():
w.terminate();
Повторное использование веб‑работника
Если рабочей переменной присвоено значение undefined, после завершения его работы вы можете повторно использовать код:
w = undefined;
Полный пример кода веб‑работника
Мы уже видели код веб‑работника в файле .js. Ниже приведён код для HTML‑страницы:
Пример
<!DOCTYPE html>
<html>
<body>
<p>Считать числа: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
var w;
function startWorker() {
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "К сожалению, веб-работник не поддерживается.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Попробуйте сами »
Веб‑работники и DOM
Поскольку веб‑работники находятся во внешних файлах, они не имеют доступа к следующим объектам JavaScript:
- Объект окна
- Объект документа
- Родительский объект
