HTML5 Web Workers

Веб-воркер — это JavaScript, работающий в фоновом режиме и не влияющий на производительность страницы.

Что такое веб-воркер?

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

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

Поддержка браузеров

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari и Opera поддерживают Web Workers.

Пример HTML5 Web Workers

В следующем примере создаётся простой веб-воркер, который выполняет подсчёт в фоновом режиме:

Пример

Счёт:




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

Код файла demo_workers.js

var i=0;

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

timedCount();

Проверить, поддерживает ли браузер Web Worker

Прежде чем создавать веб-воркер, проверьте, поддерживает ли его браузер пользователя:

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代码.....
}
else
{
    //抱歉! Web Worker 不支持
}

Создание файла веб-воркера

Теперь давайте создадим наш веб-воркер во внешнем 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;
};

Завершение веб-воркера

Когда мы создаём объект веб-воркера, он продолжает прослушивать сообщения (даже после завершения внешнего скрипта) до тех пор, пока не будет завершён.

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

w.terminate();

Полный пример кода веб-воркера

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

Пример

<!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <title>Пример руководства (example.com)</title>  </head> <body> <p>Счёт:<output id="result"></output></p> <button onclick="startWorker()">Начать работу</button> <button onclick="stopWorker()">Остановить работу</button> <p><strong>Примечание:</strong>Internet Explorer 9 и более ранние версии IE не поддерживают Web Workers.</p> <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 Workers..."; } } function stopWorker() { w.terminate(); w = undefined; }
</script> </body> </html>

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

Web Workers и DOM

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

  • объект window
  • объект document
  • объект parent
Другие расширения