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

HTML Учебник

HTML ГЛАВНАЯ HTML Введение HTML Редактор HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Путь к Файлу HTML Голова HTML Макет HTML Адаптивный HTML Компьютерный код HTML Симантика HTML Руководство по стилю HTML Сущности HTML Символы HTML Смайлики HTML Кодировка HTML URL Кодировка HTML vs. XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

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

HTML APIs

HTML Геолакация HTML Drag/Drop HTML Веб Место хранения HTML Веб Работник HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Резюме HTML Доступность

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

HTML Список Тегов HTML Атрибуты HTML Глобальные Атрибуты HTML Поддержка Браузера HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Типы Документов HTML Кодировка Символов HTML URL Кодировка 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