Въведение в JavaScript API на Web Workers

Уеб работници е JavaScript API, който ви позволява стартирайте скриптове в отделна нишка от основната. Може да ви бъде от полза, когато не желаете никаква пречка при изпълнението на основните скриптове, поради скритите скрийнсейвъри на фона.

API на Web Workers е Поддържа се в почти всички браузъри, за по-подробна информация, разгледайте документите на CanIUse. Преди да влезем в кода, нека да видим няколко сценария, в които може да искате да използвате този приложен програмен интерфейс (API), за да можете да получите представа за това, което имах предвид скриптове за фон.

Случаи на употреба

Да кажем, че има скрипт извлича и обработва файл. Ако даден файл е значително ще отнеме много време за обработка! Което може да забави други скриптове, които бяха извикани по-късно от изпълнението.

Въпреки това, ако обработката на файловете се премества във фонов конец, известен като работна нишка, други събития няма да бъдат блокирани, докато не приключи.

Скриптът изпълняват се във фонов работен конец е известен като работен сценарий или просто работник.

За друг пример си представете, че има голяма форма, подредени в раздели. Това е скрипт по начин, който актуализира контролите в един раздел засяга някои от контролите в други.

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

Тъй като потребителят няма да вижда другите раздели, докато попълва текущия, можете актуализирайте контролите на другите раздели в нишката на фона. По този начин потребителят може да продължи да използва текущия раздел, който попълва, без нито един от скриптовете му да бъде блокиран от процеса на актуализиране на контролите в други раздели.

По същия начин, ако намерите сценарий, в който даден скрипт може да блокира потребителя от използването на потребителския интерфейс докато се изпълни, може да помислите за преместването му в нишка, за да може да се изпълни във фонов режим.

Обхвати и видове работници

APIът Web Workers вероятно е един от най-простите API за работа. Той има доста ясни методи създаване на работни потоци и общуват с тях от основния скрипт.

Глобалният обхват на нишката на работника е в различен контекст от основната нишка. Ти няма достъп до методите и свойствата на прозорец обект като тревога() вътре в нишката на работника. Ти също Не можете да промените директно DOM от нишка на работник.

Но вие мога използвайте много API, които попадат под прозорец, например обещание и донасям, във вашия работен конец (вижте пълния списък).

Можете също така да имате вложени работни теми: работни нишки, създадени от друга нишка. Работник, създаден от друг, се нарича a subworker.

Също така има много видове на работниците. Двете основни са посветени и споделени работници.

Специализирани работници принадлежат към един и същ контекст на сърфиране че тяхната основна нишка принадлежи. Споделени работници обаче са присъства в различен контекст на сърфиране (например в iframe) от основния скрипт. И в двата случая основният сценарий и работниците трябва да са в един домейн.

Примерът в този урок ще бъде за специален работник, който е най-често срещаният тип.

API методи

Вижте диаграмата по-долу за a бърз преглед на всички основни методи които съставляват API на Web Workers.

Най- Worker () конструктор създава специализирана работна нишка и връща своя референтен обект. След това използваме този обект, за да комуникираме с този конкретен работник.

Най- postMessage () Методът се използва както в основния, така и в работния скрипт изпращайте данни един на друг. След това изпратените данни се получават от другата страна от onmessage събитие.

Най- прекрати () метод прекратява работна нишка от основния скрипт. Това прекратяване е непосредствен: всички текущи скриптове за изпълнение и скриптове ще бъдат отменени. Най- близо() Методът прави същото, но е извиква от нишката на работника, която се затваря.

Примерния код

Сега, нека видим някакъв примерен код. Най- index.html страница съдържа основен сценарий вътре

Започваме с създаване на работната нишка от основния скрипт.

 w = нов работник ('worker.js'); 

 w = нов работник ('worker.js'); w.onmessage = (e) => console.log ('Получено от работник: $ e.data');  

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

 console.info („създаден от работник“); onmessage = (e) => postMessage ('Hi $ e.data');