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

HTML5 Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML c CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Путь к Файлу 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 Canvas HTML SVG HTML 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