HTML5 Веб-робітники
Веб-робітник - це JavaScript, який працює в фоновому режимі, не впливаючи на продуктивність сторінки.
Що таке веб-робітник на веб-сторінці?
Під час виконання скриптів на сторінці HTML сторінка припиняє відповідати, поки скрипт (виконання скрипту) не закінчиться.
Веб-робітник - це JavaScript, який працює в фоновому режимі, незалежно від інших скриптів, не впливаючи на продуктивність сторінки. Ви можете продовжувати робити все, що хочете: натискати, обираючи речі і т.д., а веб-робітник буде працювати в фоновому режимі.
Підтримка браузерами
Цифри в таблиці визначають першу версію браузера, яка повністю підтримує Web Workers (веб-робітників).
| API | |||||
|---|---|---|---|---|---|
| Веб-робітники | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Веб-робітник. Приклад
Наведений нижче приклад створює простого веб-робітника, який підраховує числа в фоновому режимі:
Перевірте підтримку Веб-робітника
Перед тем, як створити веб-робітника, перевірте, чи підтримує його браузер користувача:
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>Рахувати числа: <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 = "К сожалению веб-работник не поддерживается.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Спробуйте самі »
Веб-робітники та DOM
Оскільки веб-робітники знаходяться у зовнішніх файлах, вони не мають доступа до таких об’єктів JavaScript:
- Об’єкт вікна
- Об’єкт документа
- Батьківський об’єкт
