ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

HTML5 Tutorial

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Forms

HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes

HTML5

HTML5 Intro HTML5 Support HTML5 New Elements HTML5 Semantics HTML5 Migration HTML5 Style Guide

HTML Graphics

HTML Canvas HTML SVG HTML Google Maps

HTML Media

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples

HTML Examples HTML Accessibility

HTML References

HTML Tag List HTML Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

HTML5 Веб-работников


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


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

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

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


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

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

API
Веб-работников 4.0 10.0 3.5 4.0 11.5

Пример веб-работников HTML

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

Пример

Count numbers:


Проверка поддержки веб-работников

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

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
  • Объект документа
  • Родительский объект