Wprowadzenie do interfejsu API JavaScript dla pracowników WWW

Pracownicy sieci to interfejs API JavaScript, który pozwala na uruchamiaj skrypty w osobnym wątku z głównego wątku. Może się przydać, gdy nie chcesz przeszkadzać w wykonywaniu głównych skryptów z powodu skryptów w tle.

Interfejs API Web Workers to obsługiwane w prawie wszystkich przeglądarkach, Aby uzyskać bardziej szczegółowe informacje, zajrzyj do dokumentacji CanIUse. Zanim przejdziemy do kodu, zobaczmy kilka scenariuszy, w których warto użyć tego interfejsu API, aby dowiedzieć się, co mam na myśli. skrypty w tle.

Przypadków użycia

Powiedzmy, że istnieje skrypt pobiera i przetwarza plik. Jeśli plik jest wydatnie duże przetworzenie zajmie dużo czasu! Które mogą utrudnić wykonanie innych skryptów, które zostały później wywołane.

Jeśli jednak przetwarzanie pliku jest przenoszone do wątku w tle, znany jako wątek roboczy, inne wydarzenia nie będą blokowane, dopóki nie skończy się poprzednia.

Scenariusz wykonywane w tle wątku roboczego jest znany jako skrypt roboczy lub po prostu pracownik.

Dla innego przykładu wyobraź sobie, że istnieje duża forma, ułożona w zakładki. Jest skryptowany w taki sposób, że aktualizuje kontrolki na jednej karcie wpływa na niektóre elementy sterujące w innych.

Jeśli aktualizacja innych kart zajmuje trochę czasu użytkownikowi nie można stale używać bieżącej karty bez zawieszania wydarzeń. To może zamrozić interfejs użytkownika, ku przerażeniu użytkownika.

Ponieważ użytkownik nie widzi innych kart podczas wypełniania bieżącej karty, możesz zaktualizuj kontrolki innych kart w wątku w tle. W ten sposób użytkownik może nadal korzystać z bieżącej karty, którą wypełnia, bez blokowania jego skryptów przez proces aktualizacji elementów sterujących na innych kartach.

Podobnie, jeśli znajdziesz scenariusz, w którym znajduje się skrypt może zablokować użytkownikowi korzystanie z interfejsu użytkownika dopóki nie zostanie wykonane, możesz rozważyć przeniesienie go do wątku roboczego, aby mógł zostać wykonany w tle.

Zakresy i typy pracowników

Interfejs API Web Workers jest prawdopodobnie jednym z najprostszych interfejsów API do pracy. Ma dość proste metody tworzyć wątki robocze i komunikować się z nimi z głównego skryptu.

Globalny zasięg wątku roboczego jest w innym kontekście niż wątek główny. ty nie ma dostępu do metod i właściwości okno obiekt Jak na przykład alarm() wewnątrz wątku roboczego. Ty także nie można bezpośrednio zmienić DOM z wątku roboczego.

Jednak ty mogą używaj wielu interfejsów API okno, na przykład Obietnica i Sprowadzać, w wątku pracownika (zobacz pełną listę).

Możesz także mieć zagnieżdżone wątki robocze: wątki robocze utworzone z innego wątku roboczego. Pracownik utworzony przez innego nazywa się subworker.

Istnieje również wiele typy pracowników. Dwa główne są oddani i dzieleni pracownicy.

Dedykowani pracownicy należą do tego samego kontekstu przeglądania że ich główny wątek należy do. Pracownicy dzieleni są jednak obecny w innym kontekście przeglądania (na przykład w ramce iframe) ze skryptu głównego. W obu przypadkach główny skrypt i pracownicy muszą być w tej samej domenie.

Przykład w tym samouczku będzie o oddanym pracowniku, który jest najczęstszym typem.

Metody API

Zobacz poniższy schemat dla a szybki przegląd wszystkich głównych metod które tworzą API pracowników WWW.

The Pracownik() konstruktor tworzy dedykowany wątek roboczy i zwraca swój obiekt referencyjny. Następnie używamy tego obiektu do komunikacji z tym konkretnym pracownikiem.

The Wyślij wiadomość() metoda jest używana zarówno w głównym, jak i roboczym skrypcie wysyłać dane do siebie. Wysłane dane są następnie odbierane przez drugą stronę onmessage obsługa zdarzeń.

The zakończyć() metoda kończy wątek roboczy ze skryptu głównego. To zakończenie natychmiastowy: wszelkie bieżące wykonywanie skryptów i oczekujące skrypty zostaną anulowane. The blisko() metoda robi to samo, ale tak jest wywoływany przez sam zamykający się wątek roboczy.

Przykładowy kod

Zobaczmy teraz przykładowy kod. The index.html strona zawiera główny skrypt wewnątrz a

Zaczynamy od tworzenie wątku roboczego z głównego skryptu.

  w = new Worker ('worker.js'); 
 The Pracownik() konstruktor pobiera argument pliku roboczego jako argument.
 Następnie dodajemy obsługę zdarzeń dla onmessage zdarzenie nowo utworzonej instancji pracownika do odbierać z niego dane. The dane własność mi zdarzenie będzie przechowywać odebrane dane.
  w = new Worker ('worker.js'); w.onmessage = (e) => console.log ('Otrzymano od pracownika: $ e.data');  
 Teraz używamy Wyślij wiadomość() do wyślij dane do wątku roboczego na kliknięcie przycisku. The Wyślij wiadomość() metoda może przyjąć dwa argumenty. Pierwszy może być dowolnego typu (łańcuch, tablica…). To dane do wysłania do wątku roboczego (lub do głównego skryptu, gdy metoda jest obecna w wątku roboczym).
 Drugi opcjonalny parametr to tablica obiektów, które może być używany przez wątki robocze (ale nie przez główny skrypt lub odwrotnie). Te rodzaje obiektów są nazywane Przenośny przedmioty.
  document.querySelector ('button'). onclick = () => w.postMessage ('john');  
 Wysyłam wartość ciągu do wątku roboczego.
 W wątku roboczym musimy dodać onmessage obsługa zdarzeń, która otrzyma dane wysłane do niego za pomocą głównego skryptu na kliknięcie przycisku. Wewnątrz przewodnika my złączyć otrzymany ciąg z innym i wyślij wynik z powrotem do głównego skryptu.
  console.info („pracownik utworzony”); onmessage = (e) => postMessage ('Hi $ e.data');  
 W przeciwieństwie do głównego skryptu, w którym musieliśmy użyć w obiekt odniesienia do odnoszą się do konkretnego wątku roboczego na którym skrypt następnie używa onmessage i Wyślij wiadomość metody, jest nie potrzeba obiektu referencyjnego w wątku roboczym wskazać główny wątek.
 Kod działa w następujący sposób. Po załadowaniu przeglądarki index.html, konsola pokaże „pracownik stworzony” wiadomość jak tylko pracownik() konstruktor jest wykonywany w głównym wątku, tworzenie nowego pracownika.
 Po kliknięciu przycisku na stronie otrzymasz „Otrzymano od pracownika: Cześć John” wiadomość w konsoli, która była ciągiem konkatenowany w wątku roboczym z danymi wysłanymi do niego, a następnie był odesłany do głównego skryptu.