Використання Web workers для розпаралелювання JavaScript

Впровадження наукових та інформаційних підходів для навчання студентів на кафедрі комп’ютерних технологій
04.12.2019
Основи React Router
04.12.2019
Показати всі

Використання Web workers для розпаралелювання JavaScript

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)
  • Обчислення, пов’язані з рухами в грі
  • Обробка та фільтрація зображень
  • Обробка текстових даних (синтаксис коду, перевірка правопису, кількість слів)

 

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *