Вступ до API JavaScript для веб-працівників

Веб-працівники - це JavaScript API, який дозволяє запускати скрипти в окремому потоці від основного. Це може стати в нагоді, коли ви не хочете будь-яких перешкод у виконанні основних сценаріїв, завдяки скриптам фонового стилю.

API веб-працівників підтримується майже у всіх браузерах, Для отримання більш детальної інформації зверніться до документів CanIUse. Перш ніж потрапити до коду, давайте побачимо кілька сценаріїв, де ви можете використовувати цей API, щоб отримати уявлення про те, що я мав на увазі фоновий сценарій.

Використовуйте випадки

Скажімо, є сценарій вибирає та обробляє файл. Якщо файл значно Великий процес буде тривати довго! Що може заблокувати інші сценарії, які були викликані пізніше від виконання.

Однак, якщо обробка файлу переміщується до фонового потоку, відомий як робочий потік, інші події не будуть заблоковані, доки перший не закінчиться.

Сценарій виконаний у фоновому робочому потоці відомий як робочий сценарій або просто працівника.

Для іншого прикладу, уявіть, що є велика форма, розташована в вкладках. Він створений таким чином, що оновлення елементів керування в одній вкладці впливає на деякі контролі в інших.

Якщо оновлення інших вкладок займає деякий час, користувач не можна постійно використовувати поточну вкладку без затримання подій. Це може зафіксувати користувальницький інтерфейс, розчарування користувача.

Оскільки користувач не буде бачити інші вкладки під час заповнення поточного, можна оновлюйте елементи керування іншими вкладками у фоновому потоці. Таким чином, користувач може продовжувати використовувати поточну вкладку, яку він заповнює, без жодного сценарію, заблокованого процесом оновлення елементів керування в інших вкладках..

Аналогічно, якщо ви знайдете сценарій, де є сценарій може заблокувати користувача від використання інтерфейсу користувача Доки його виконання не буде виконано, ви можете розглянути його переміщення до робочого потоку, щоб його можна було виконати у фоновому режимі.

Області та види робітників

API Web Workers, ймовірно, є одним з найпростіших API для роботи. Він має досить прості методи створення робочих потоків і спілкуватися з ними з основного сценарію.

Глобальна область робочого потоку знаходиться в іншому контексті від основного потоку. ти не може отримати доступ до методів і властивостей вікна об'єкт як от сповіщення () всередині робочого потоку. Ти також неможливо змінити DOM безпосередньо з робочого потоку.

Однак ви може використовувати багато API, які підпадають під вікна, наприклад Обіцянка і Fetch, у вашому робочому потоці (див. повний список).

Ви також можете мати вкладені робочі потоки: робочі потоки, створені з іншого робочого потоку. Працівник, створений іншим, називається a підрядник.

Також є багато типів працівників. Два основних є віддані працівники.

Виділені працівники належать до одного контексту перегляду до якої належить їх основна нитка. Спільні працівники, однак, є присутні в іншому контексті перегляду (наприклад, у iframe) з основного сценарію. В обох випадках основний сценарій і робітники повинні бути в одному домені.

Прикладом у цьому підручнику буде про присвячений працівник, який є найбільш поширеним типом.

Методи API

Див. Нижче схему для a швидкий огляд всіх основних методів що складають API веб-працівників.

The Працівник () конструктор створює спеціальний робочий потік і повертає свій опорний об'єкт. Потім ми використовуємо цей об'єкт для спілкування з конкретним працівником.

The postMessage () Метод використовується як в основних, так і в робочих скриптах передавати дані один одному. Потім передані дані надходять на іншу сторону на повідомлення обробник подій.

The припинити () метод завершує робочий потік з основного сценарію. Це припинення негайно: будь-яке поточне виконання сценарію та очікувані скрипти буде скасовано. The close () Метод робить те ж саме, але це викликається робочим потоком, що закриває себе.

Приклад коду

Тепер давайте побачимо зразок коду. The index.html сторінка містить Головний сценарій всередині a

Почнемо з створення робочого потоку з основного сценарію.

 w = new Worker ('worker.js'); 

 w = new Worker ('worker.js'); w.onmessage = (e) => console.log ('Отримано від працівника: $ e.data');  

 onclick = () => w.postMessage ('john');  

 console.info ("працівник створений"); onmessage = (e) => postMessage ('Привіт $ e.data');