Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

HTML Учебники


HTML Формы


HTML Графика


HTML Медиа


HTML API Интерфейсы


HTML Примеры


HTML Ссылки



HTML5 Веб работник 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>Счет чисел: <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


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.