HTML5. Web Workers - Веб-працівники

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Веб-працівник - це JavaScript, який працює у фоновому режимі, не впливаючи на продуктивність сторінки.


Що таке веб-працівник?

Під час виконання скриптів на сторінці HTML сторінка перестає відповідати, поки сценарій не закінчиться.

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


Підтримка браузерами

Цифри в таблиці визначають першу версію браузера, яка повністю підтримує Web Workers.

API
Web Workers 4.0 10.0 3.5 4.0 11.5

HTML Веб-працівник. Приклад

Наведений нижче приклад створює простий веб-працівник, який підраховує числа у фоновому режимі:

Приклад:

Count numbers:

Спробуйте самі »

Перевірте підтримку Веб-працівника

Перш ніж створити веб-працівника, перевірте, чи підтримує його браузер користувача:

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();

Повторне використання Веб-працівника

Якщо для робочої змінної задано значення undefined, після її завершення ви можете повторно використовувати код:

w = undefined;

Повний приклад коду Веб-працівника

Ми вже бачили код Веб-працівника у файлі .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>
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 = "Sorry! No Web Worker support.";
  }
}

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

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

Веб-працівники та DOM

Оскільки веб-працівники перебувають у зовнішніх файлах, вони не мають доступу до таких об'єктів JavaScript:



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.