API веб-воркеров HTML
Веб-воркер — это JavaScript, работающий в фоновом режиме и не влияющий на производительность страницы.
Что такое веб-воркер?
При выполнении сценариев на HTML-странице страница перестает отвечать на запросы до тех пор, пока сценарий не завершится.
Веб-воркер — это JavaScript, который работает в фоновом режиме, независимо от других скриптов, не влияя на производительность страницы. Вы можете продолжать делать все, что хотите: щелкать, выбирать элементы и т. д., пока веб-воркер работает в фоновом режиме.
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает Web Workers.
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
Пример веб-воркеров HTML
В приведенном ниже примере создается простой веб-воркер, который считает числа в фоновом режиме:
Пример
Проверить поддержку веб-воркеров
Перед созданием веб-воркера проверьте, поддерживает ли его браузер пользователя:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Создайте файл веб-воркера
Теперь давайте создадим наш веб-воркер во внешнем 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;
Полный пример кода веб-воркера
Мы уже видели код Worker в файле .js. Ниже приведен код HTML-страницы:
Пример
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <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 = "Sorry! No Web Worker support.";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Веб-воркеры и DOM
Поскольку веб-воркеры находятся во внешних файлах, у них нет доступа к следующим объектам JavaScript:
- Объект окна
- Объект документа
- Родительский объект