САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГлаваHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML ОбъектыHTML СимволыHTML КодировкаHTML URL КодированиеHTML XHTML

HTML Формы

HTML ФормыHTML Элементы формыHTML Тип вводаHTML Атрибуты ввода

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список ТеговHTML АтрибутыHTML ГлобальныеHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор КодировокHTML URL КодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКовертер PX в EMКлавишные комбинации

HTML Веб Работник



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


Что такое "Веб работник"?

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

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


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

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

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

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

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

Пример

Количество номеров:

Редактор кода »

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

Перед созданием "Веб работника" проверьте, поддержку браузера:

if (typeof(Worker) !== "undefined") {
    // Да! Браузер поддерживает "Веб работника"!
    // Некоторый код.....
} else {
    // К сожалению! Нет поддержки "Веб работника".
}

Создание файла "Веб работника"

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

Когда "Веб работник" отправляет сообщение, выполняется код в прослушивателе событий. Данные из "Веб работника" хранятся в event.data.


Завершение "Веб работника"

При создании объекта "Веб работника" он будет продолжать прослушивать сообщения (даже после завершения внешнего сценария) до тех пор, пока он не будет завершен.

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

w.terminate();

Повторное использование "Веб работника"

Если задать для переменной Worker значение undefined, то после ее завершения можно повторно использовать код:

w = undefined;

Полный пример кода "Веб работника"

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

Пример

<!DOCTYPE html>
<html>
<body>

<p>Количество номеров: <output id="result"></output></p>
<button onclick="startWorker()">Старт Работника</button>
<button onclick="stopWorker()">Стоп Работника</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 = "К сожалению! Нет поддержки Веб работника";
   }
}

function stopWorker(){
   w.terminate();
    w = undefined;
}
</script>

</body>
</html>
Редактор кода »

"Веб работника" и DOM

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

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