HTML5 Веб-работники
Веб-работник - это JavaScript, который работает в фоновом режиме, не влияя на продуктивность страницы.
Что такое веб-работник на веб-странице?
Во время выполнения скриптов на странице HTML страница перестаёт отвечать, пока сценарий (выполнение скрипта) не закончится.
Веб-работник - это JavaScript, который работает в фоновом режиме, независимо от других скриптов, не влияя на продуктивность страницы. Вы можете продолжать делать всё, что хотите: нажимать, выбирая вещи и т.д., а веб-работник будет работать в фоновом режиме.
Поддержка браузерами
Цифры в таблице определяют первую версию браузера, которая полностью пподдерживает Web Workers (веб-работники).
| API | |||||
|---|---|---|---|---|---|
| Веб-работники | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Веб-работник. Пример
Приведённый ниже пример создаёт простого веб-работника, который подсчитывает числа в фоновом режиме:
Проверьте поддержку Веб-работника
Перед тем, как создать веб-работника, проверьте, поддерживает ли его браузер пользователя:
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:
- Объект окна
- Объект документа
- Родительский объект
