HTML5 Вебробітники API
Вебробітник - це 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:
- Об’єкт вікна
- Об’єкт документа
- Батьківський об’єкт
