Web workers, які з’явилися у специфікації HTML5, забезпечують спосіб запуску JavaScript-коду поза єдиним потоком виконання у браузері. Зазвичай один потік обробляє запити на відображення вмісту, а також взаємодії користувачів за допомогою клавіатури, клацання миші та інших пристроїв, а також відповіді на запити AJAX.
Якщо, наприклад, відповідь на запит AJAX буде дуже повільною, це відобразиться на інтерактивності браузера.
Web workers дозволяють JavaScript-коду працювати окремим потоком, повністю незалежним від потоку браузера та його звичайної діяльності.
Наскільки корисним може бути використання web workers у сучасних веб-додатках? Настільні комп’ютери зараз мають потужні центральні процесори і декілька гігабайт оперативної пам’яті. Мобільні пристрої за своїми обчислювальними можливостями наближаються до настільних систем, так що начебто немає потреби у підвищення швидкості роботи веб-додатків.
Насправді така потреба є. По-перше, швидкість виконання таких речей як запити AJAX залежать скоріше не від потужності центрального процесора, а від швидкості мережі. По-друге, широке розповсюдження багатоядерних процесорів дозволяє повноцінно проявити переваги багатопотокового додатку коли кожен потік може виконуватися окремим ядром.
Створення нового екземпляру web-worker досить просте:
new Worker(‘worker.js’),
де worker.js — ім’я файлу з кодом JavaScript.
Після створення web-worker він працює в окремому потоці, незалежному від основного потоку браузера, виконуючи будь-який код у наданому йому скрипті.
Дані між Workers та основним потоком JavaScript передаються за допомогою двох додаткових функцій у коді JavaScript:
Функція postMessage () для відправки даних
Обробник події повідомлення для отримання даних
Обробник події повідомлення отримує аргумент event, який має властивість «data» з даними, переданими з іншої сторони.
Таким способом можна організувати двосторонній обмін даними між основним потоком і worker.
Типова проста логіка використання worker: із HTML сторінки повідомлення надсилається worker і HTML сторінка чекає на відповідь:
var worker = new Worker(«demo1-hello-world.js»);
// Receive messages from postMessage() calls in the Worker
worker.onmessage = (evt) => {
console.log(«Message posted from webworker: » + evt.data);
}
// Pass data to the WebWorker
worker.postMessage({data: «123456789»});
Код worker чекає на повідомлення:
// demo1-hello-world.js
postMessage(‘Worker running’);
onmessage = (evt) => {
postMessage(«Worker received data: » + JSON.stringify(evt.data));
};
Даний код у результаті виведе на консоль наступне:
Message posted from webworker: Worker running
Message posted from webworker: Worker received data: {“data”:”123456789″}
Треба пам’ятати, що web worker зазвичай застосовуються для вирішення довготривалих завдань, протягом виконання яких може відбуватися багаторазовий обмін повідомлень між браузером і web worker.
Безпечність виконання web worker забезпечується завдяки двом речам:
Можливі випадки застосування web worker:
Дмитро Красношапка,
старший викладач кафедри
комп’ютерних технологій