HTML5 Веб работник API
Веб работник - это JavaScript, работающий в фоновом режиме, не влияя на производительность страницы.
Что такое веб работник?
При выполнении сценариев на HTML странице страница перестает отвечать на запросы до тех пор, пока сценарий не будет завершен.
Веб работник - это JavaScript, который работает в фоновом режиме, независимо от других сценариев, не влияя на производительность страницы. Вы можете продолжать делать все, что хотите: щелкать, выбирать вещи и т.д., В то время когда веб работник работает в фоновом режиме.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает веб работников.
| API | |||||
|---|---|---|---|---|---|
| Веб работники | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
Пример HTML Веб работника
В приведенном ниже примере создается простой веб работник, который считает числа в фоновом режиме:
Проверьте поддержку веб работника
Перед созданием веб работника проверьте, поддерживает ли его браузер пользователя:
if (typeof(Worker) !== "undefined") {
// Да! Поддержка веб работников!
// Некоторый код.....
} else {
// Прости! Нет поддержки веб работников.
}
Создание файла worker
Теперь давайте создадим нашего веб работника во внешнем JavaScript.
Здесь мы создаем сценарий, который имеет значение. Скрипт хранится в файле "demo_workers.js":
var i = 0;
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
Важной частью приведенного выше кода является метод postMessage() -
который используется для отправки сообщения обратно на HTML страницу.
Примечание: Обычно веб работники используются не для таких простых сценариев, а для более интенсивных задач CPU.
Создание объекта worker
Теперь, когда у нас есть файл worker, нам нужно вызвать его с HTML страницы.
В следующих строках проверяется, существует ли работник, если нет - он создает новый объект worker и запускает код в "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.
Завершение работы веб работника
При создании объекта worker он будет продолжать прослушивать сообщения (даже после завершения работы внешнего скрипта) до тех пор, пока не завершит работу.
Чтобы завершить работу веб работника и освободить ресурсы браузера/компьютера, используйте метод terminate():
w.terminate();
Повторное использование веб работника
Если вы зададите переменной worker значение undefined, то после ее завершения вы сможете повторно использовать код:
w = undefined;
Пример Полного кода worker
Мы уже видели рабочий код в файле .js. Ниже приведен код для HTML страницы:
Пример
<!DOCTYPE html>
<html>
<body>
<p>Счет чисел: <output id="result"></output></p>
<button onclick="startWorker()">Старт веб работник</button>
<button onclick="stopWorker()">Стоп веб работник</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:
- Объект window
- Объект document
- Объект parent