Веб работник - это JavaScript, работающий в фоновом режиме, не влияющий на производительность страницы.
Что такое веб работник?
При выполнении сценариев на странице HTML страница перестает отвечать, пока сценарий не будет завершен.
Веб работник - это JavaScript, который работает в фоновом режиме, независимо от других скриптов, не влияя на производительность страницы. Вы можете продолжать делать все, что хотите: щелкать, выбирать объекты и т. д., Пока веб-воркер работает в фоновом режиме.
Поддержка браузера
Числа в таблице указывают первые версии браузеров, которые полностью поддерживают Веб работника:
| Chrome 4 | IE 10 | Firefox 3.5 | Safari 4 | Opera 11.5 |
| Январь 2010 | Сентябрь 2012 | Июнь 2009 | Июнь 2009 | Июнь 2011 |
Пример веб воркеров
В приведенном ниже примере создается простой веб воркер, который считает числа в фоновом режиме:
Проверить поддержку веб воркера
Перед созданием веб воркера проверьте, поддерживает ли его браузер пользователя:
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();
Повторное использование веб воркера
Если вы установите для переменной worker значение undefined, после ее завершения вы можете повторно использовать код:
w = undefined;
Полный пример кода веб воркера
Мы уже видели код worker в файле .js. Ниже приведен код HTML страницы:
<!DOCTYPE html>
<html>
<body>
<p>Подсчет чисел:: <output id="result"></output></p>
<button onclick="startWorker()">Упражнения Worker</button>
<button onclick="stopWorker()">Стоп 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 = "Извините! Нет поддержки Web Worker.";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Попробуйте сами »
Веб воркеры и DOM
Поскольку веб воркеры находятся во внешних файлах, они не имеют доступа к следующим объектам JavaScript:
- Объект window
- Объект документа
- Родительский объект