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

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 в XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание 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 Веб работник API



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

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

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

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


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

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

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

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

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

Пример

Счет чисел:

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

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

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

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


Создание файла worker

Теперь давайте создадим нашего веб работника во внешнем JavaScript.

Здесь мы создаем сценарий, который имеет значение. Скрипт хранится в файле "demo_workers.js":

var i = 0;

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

timedCount();

Важной частью приведенного выше кода является метод postMessage() - который используется для отправки сообщения обратно на HTML страницу.

Примечание: Обычно веб работники используются не для таких простых сценариев, а для более интенсивных задач CPU.


Создание объекта worker

Теперь, когда у нас есть файл worker, нам нужно вызвать его с HTML страницы.

В следующих строках проверяется, существует ли работник, если нет - он создает новый объект worker и запускает код в "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.


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

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

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

w.terminate();

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

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

w = undefined;

Пример Полного кода worker

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

Пример

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Старт Worker</button>
<button onclick="stopWorker()">Стоп 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 = "Прости! Нет поддержки веб работников.";
  }
}

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

</body>
</html>
Попробуйте сами »

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

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

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