API Web Worker

Web Worker это JavaScript, который выполняется в фоновом режиме и не влияет на производительность страницы.

Что такое Web Worker?

Когда выполняется скрипт на странице HTML, страница не отвечает до завершения выполнения скрипта.

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

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

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

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
Январь 2010 года Сентябрь 2012 года Июнь 2009 года Июнь 2009 года Июнь 2011 года

Экземпляр Web Worker

Ниже приведен пример создания простого Web Worker, который выполняет вычисления в фоновом режиме:

Пример

Счетчик:

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

Проверка браузера Web Worker

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

if (typeof(Worker) !== "undefined") {
  // Да! Поддержка Web worker!
  // Некий код.....
}
  // Извините! Поддержка Web Worker отсутствует...
}

Создание файла Web Worker

Теперь, давайте создадим наш Web Worker в внешнем JavaScript.

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

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

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

Комментарий:Обычно web worker не используется для таких простых скриптов, а для CPU-интенсивных задач.

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

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

Следующие строки кода проверяют, существует ли worker, если его нет, создается новый объект web worker и запускается код из "demo_workers.js":

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

Затем мы можем отправлять и получать сообщения от web worker.

Добавьте "onmessage" слушатель событий к web worker.

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

Когда Web Worker публикует сообщение, выполняется код в обработчике событий. Данные из Web Worker хранятся в event.data.

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

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

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

w.terminate();

Повторное использование Web Worker

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

w = undefined;

Полный пример кода Web Worker

Мы уже видели код 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>

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

Web Worker и DOM

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

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