HTML веб рабочие API
Веб-работник - это JavaScript, работающий в фоновом режиме, не влияя на производительность страницы.
Что такое веб-работник?
При выполнении скриптов на HTML-странице страница не отвечает до тех пор, пока сценарий не будет завершен.
Веб-работник - это JavaScript, который работает в фоновом режиме, независимо от других скриптов, не влияя на производительность страницы. Вы можете продолжать делать все, что хотите: нажимать, выбирать вещи и т. д., в то время как веб-работник работает в фоновом режиме.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает Web Workers.
Пример HTML Web Workers
В приведенном ниже примере создается простой веб-работник, который считает числа в фоновом режиме:
Проверьте поддержку веб-работника
Перед созданием веб-работника проверьте, поддерживает ли его браузер пользователя:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
Создать файл веб-работника
Теперь давайте создадим нашего веб-работника во внешнем JavaScript.
Здесь мы создаем сценарий, который имеет значение. Сценарий хранится в файле "demo_workers.js":
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
Важной частью кода выше является метод 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():
Повторное использование веб-работника
Если вы установите рабочую переменную в неопределенное значение, после ее завершения вы можете повторно использовать код:
Полный пример кода веб-работника
Мы уже видели код Worker в файле .js. Ниже приведен код для HTML-страницы:
Пример
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
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 = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
Веб-работники и DOM
Поскольку веб-работники находятся во внешних файлах, они не имеют доступа к следующим объектам JavaScript: