HTML Web Workers

Web worker — это JavaScript, который выполняется в фоновом режиме и не влияет на производительность страницы.

Что такое Web Worker?

Когда выполняется скрипт на странице HTML, страница не отвечает, пока скрипт не завершится.

Web worker — это JavaScript, который выполняется в фоновом режиме, независимо от других скриптов и не влияет на производительность страницы. Вы можете продолжать делать все, что вам угодно: кликать, выбирать содержимое и т.д., в то время как web worker работает в фоновом режиме.

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает Web Worker.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

Пример HTML Web Workers

Ниже приведен пример создания простого web worker, который计数ит в фоновом режиме:

Счетчик:

Попробуйте сами

Проверка поддержки Web Worker

Перед созданием web worker проверьте, поддерживает ли браузер пользователя его:

if (typeof(Worker) !== "undefined") {
    // Да! Поддержка Web worker!
    // Некоторый код.....
}
    // Извините! Поддержка Web Worker недоступна!
}

Создание файла Web Worker

Теперь давайте создадим наш web worker в внешнем файле JavaScript.

Здесь мы создаем скрипт подсчета. Этот скрипт хранится в файле "demo_workers.js":

var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

Важной частью этого кода является метод postMessage() - он используется для отправки сообщения обратно в HTML-страницу.

Комментарии: Web worker обычно не используется для таких простых скриптов, а для более ресурсоемких задач, требующих использования CPU.

Создание объекта Web Worker

Теперь у нас есть файл web worker, и нам нужно вызвать его из HTML-страницы.

Следующие строки кода проверяют наличие worker. Если его нет, - он создает новый объект web worker и запускает код из "demo_workers.js":

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

Затем мы можем отправлять и получать сообщения от web worker.

Добавьте "onmessage" обработчик событий к web worker:

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
}

Когда web worker отправляет сообщение, выполняется код в обработчике событий. Данные из web worker хранятся в event.data.

Терминация Web Worker

После создания web worker он продолжает监听 сообщения (даже после завершения внешнего скрипта) до его终止ы.

Чтобы终止 web worker и освободить ресурсы браузера/компьютера, используйте метод terminate():

w.terminate();

Повторное использование Web Worker

Если вы установите переменную worker в undefined, после ее завершения вы можете повторно использовать этот код:

w = undefined;

Полный пример кода Web Worker

Мы уже видели код Worker в файле .js. Вот код HTML-страницы:

Пример

<!DOCTYPE html>
<html>
<body>
<p>Считать числа: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<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;
        }
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Попробуйте сами

Web Worker и DOM

Поскольку web worker расположен во внешнем файле, они не могут получить доступ к следующим объектам JavaScript:

  • Объект window
  • Объект document
  • Объект parent