Учебник по JS

ГЛАВНАЯ JS Введение JS Куда Вывод JS Заявления JS JS-синтаксис JS-комментарии JS-переменные JS Пусть Константа JS JS-операторы JS-арифметика Назначение JS JS-типы данных JS-функции JS-объекты JS-события JS-строки Строковые методы JS Поиск строки JS Шаблоны строк JS JS-номера Методы номеров JS JS-массивы Методы массива JS Сортировка массива JS Итерация массива JS Константа массива JS JS-даты Форматы даты JS Методы получения даты JS Методы установки даты JS JS-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

Определения функций Параметры функции Вызов функции Вызов функции Функция Применить Закрытие функций

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

Объекты JavaScript HTML DOM-объекты


API веб-воркеров


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


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

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

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

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

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

Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
Jan 2010 Sep 2012 Jun 2009 Jun 2009 Jun 2011

Пример веб-воркеров

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

Пример

Count numbers:


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

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

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}


Создайте файл веб-воркера

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

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

let i = 0;

function timedCount() {
  i ++;
  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();

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

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

w = undefined;

Полный пример кода веб-воркера

Мы уже видели код Worker в файле .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>
let w;

function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}

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

</body>
</html>

Веб-воркеры и DOM

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

  • Объект окна
  • Объект документа
  • Родительский объект