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, окреме від середовища браузера
• обмін даними через основний потік та потік web worker відбувається тільки через виклик postMessage (), причому дані передаються за значенням (by value)

Можливі випадки застосування web worker:

• Попереднє завантаження та / або кешування даних для подальшого використання
• Опитування та обробка даних із веб-служб
• Обробка та показ великих наборів даних (think genomics)
• Обчислення, пов’язані з рухами в грі
• Обробка та фільтрація зображень
• Обробка текстових даних (синтаксис коду, перевірка правопису, кількість слів)

Дмитро Красношапка,
старший викладач кафедри
комп’ютерних технологій