HTML5 Веб-работников
Веб-работник — это JavaScript, выполняющийся в фоновом режиме, не влияя на производительность страницы.
Что такое веб-работник?
При выполнении скриптов на HTML-странице страница перестает отвечать на запросы до завершения сценария.
Веб-работник — это JavaScript, который работает в фоновом режиме, независимо от других скриптов, не влияя на производительность страницы. Вы можете продолжать делать все, что вы хотите: нажав, выбрав вещи, и т.д., в то время как веб-работник работает в фоновом режиме.
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает веб-работников.
| API | |||||
|---|---|---|---|---|---|
| Веб-работников | 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-страницу.
Примечание: Обычно веб-работники не используются для таких простых скриптов, но для более ресурсоемких задач.
Создание веб-объекта Worker
Теперь, когда у нас есть рабочий файл Web, нам нужно вызвать его из 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>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:
- Объект Window
- Объект документа
- Родительский объект