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 niewindow
. - 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ę
W jakim wątku działa narzędzie Web Worker?
Do jakich treści może mieć dostęp pracownik internetowy?
window
,
w tym fetch
.
window
, ale tylko pośrednio.W jaki sposób pracownik internetowy może uzyskać dostęp do kontekstu okna?
postMessage
w kontekście instancji roboczej (self
).
window
.
window
.
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.