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