Omówienie procesów roboczych

Do tej pory duża część treści w tym kursie skupiała się na takich zagadnieniach, jak: ogólne kwestie dotyczące wydajności kodu HTML, wskazówki dotyczące zasobów, optymalizację różnych typów zasobów w celu skrócenia czasu początkowego wczytywania strony i reagowania na użytkownika oraz leniwe ładowanie konkretnych zasobów.

Jest jednak jeden aspekt wydajności JavaScriptu, który nie był dotąd omówione już w ramach tego szkolenia. Taka rola pracowników internetowych w responsywność danych wejściowych, którą omawiamy w tym i następnym module.

JavaScript jest często określany jako język jednowątkowy. W praktyce odnosi się do wątku głównego, czyli pojedynczego wątku, w którym przeglądarka większość czynności, które wykonujemy w przeglądarce. Te zadania obejmują zadania w obszarach takich jak obsługa skryptów, niektóre rodzaje renderowania, analiza HTML i CSS, i inne, które zwiększają wygodę użytkowników. Tak naprawdę przeglądarki używają innych wątków, by wykonać pracę, której nie zwykle mają bezpośredni dostęp, np. do wątków GPU.

Jeśli chodzi o obsługę języka JavaScript, zazwyczaj ograniczono się do wykonywania w wątku głównym, ale tylko domyślnie. Można zarejestrować się i korzystać w kolejnych wątkach w JavaScripcie. Funkcja umożliwiająca wielowątkowość JavaScript jest nazywany interfejsem Web Workers API.

Internetowe instancje robocze przydają się, gdy praca wymaga kosztownych obliczeń, nie można uruchomić w wątku głównym bez wywoływania długich zadań, które tworzą stronę nie odpowiada. Mogą one z pewnością wpłynąć na interakcje z witryną Next Paint (INP), aby dowiedzieć się, kiedy masz pracę, którą można całkowicie poza głównym wątkiem. W ten sposób można uzyskać więcej miejsca wykonywać inne zadania w wątku głównym, co przyspieszy interakcję z użytkownikami.

W tym module i kolejnej prezentacji przedstawiającej konkretny przypadek użycia odnoszą się pracowników. Sama demonstracja pokazuje, jak można wykorzystać narzędzie internetowe do wykonania danej pracy. odczytu metadanych obrazu z pliku JPEG poza wątkiem głównym. mogą przywrócić te metadane z powrotem do wątku głównego widocznego dla użytkownika.

Uruchamianie narzędzia Web Worker

Proces internetowy można zarejestrować przez utworzenie instancji klasy Worker. Kiedy to zrobisz więc musisz określić, gdzie znajduje się kod instancji internetowej, który wczytuje a potem tworzy nowy wątek na ich temat. Powstały wątek jest często nazywany wątek roboczy.

const myWebWorker = new Worker('/js/my-web-worker.js');

W pliku JavaScript instancji roboczej – w tym przypadku my-web-worker.js – możesz Napisać kod, który będzie uruchamiany w osobnym wątku roboczym.

Ograniczenia instancji internetowych

W przeciwieństwie do JavaScriptu, który działa w wątku głównym, instancje internetowe nie mają bezpośredniego dostępu. w kontekście window. i mieć ograniczony dostęp do interfejsów API, Sieć instancje robocze podlegają tym ograniczeniom:

• Instancje robocze nie mają bezpośredniego dostępu do DOM.
• Pracownicy internetowe mogą komunikować się z kontekstem window za pomocą wiadomości potoku, co oznacza, że narzędzie internetowe może pośrednio uzyskać dostęp do DOM.
• Zakres instancji roboczej to self, a nie window.
• Zakres instancji roboczej ma dostęp do elementów podstawowych JavaScript a także interfejsy API, takie jak fetch i dość dużą liczbę innych interfejsów API.

Jak pracownicy internetowi komunikują się z window

Pracownik internetowy może komunikować się z elementem window wątku głównego w kontekście potoku wiadomości. Ten potok umożliwia przesyłanie danych do z wątku głównego i instancji roboczej. Aby wysłać dane z instancji roboczej do w wątku głównym, skonfigurowano zdarzenie message w kontekście instancji roboczej (self)

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

Następnie w skrypcie w kontekście window w wątku głównym możesz uzyskać wiadomość z wątku Web Worker przy użyciu jeszcze innego zdarzenia message:

// scripts.js

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});

Potok do komunikacji dla pracownika internetowego to pewna możliwość wyjścia z sieci kontekstu instancji roboczej. Za jego pomocą możesz wysyłać dane z interfejsu webowego do window których można użyć do aktualizacji DOM lub wykonać inne prace w wątku głównym.

Sprawdź swoją wiedzę

Kolejny krok: konkretny przypadek użycia dla pracowników internetowych

W następnym module przedstawiliśmy szczegółowy przykład użycia środowiska internetowego, co pokazujemy. W tym module narzędzie Web Worker pobiera plik JPEG z danego adresu URL i odczytać jego metadane EXif w instancji roboczej. Dane te są następnie wysyłane aby wrócić do wątku głównego.