javascript

Czy wiesz, czym jest i jak działa WebWorker?

23 lutego 2024

JavaScript, który wywołujemy na naszych stronach w postaci skryptów jest jednowątkowy. Jeżeli zdecydujemy się używać go do wykonywania zasobożernych obliczeń, może spowodować to, że interfejs użytkownika stanie się nieresponsywny.

Z pomocą przychodzą nam webworkery. Jest to natywny mechanizm HTML5 API, który możemy wykorzystać bez żadnych dodatkowych bibliotek. Polega on na oddelegowywaniu operacji do specjalnie utworzonych wątków działających niezależnie od naszej aplikacji.

Aby utworzyć nowy wątek należy stworzyć instancję klasy Worker:

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

Dane można wysyłać do niego metodą postMessage():

worker.postMessage(dataToSend);

Z kolei sam worker musi nasłuchiwać na dane za pomocą listenera (znajduje się on w skrypcie worker.js przekazanym jako parametr do konstruktora)

self.addEventListener('message', (event) => {
    // obsługa wejścia
});

Worker utworzony w ten sposób zostaje zakończony razem z zamknięciem strony, która powołała go do życia. Możemy również sami go zakończyć za pomocą polecenia:

worker.terminate();

Workery mają pewne ograniczenia:

nie mamy dostępu do naszej struktury DOM, ani obiektów window i document,
obiekt location jest tylko do odczytu, nie będziemy mogli z poziomu workera przekierowywać strony, ani tworzyć nowej zakładki,
worker nie może istnieć sam w oderwaniu od strony, która go utworzyła.

Poniżej kilka typowych przykładów wykorzystania webworkerów:

obliczenia w tle: webworkery są wykorzystywane do wykonywania długotrwałych obliczeń w tle, takich jak przetwarzanie dużych zestawów danych czy złożone algorytmy, które mogłyby spowolnić działanie interfejsu użytkownika,
manipulacja na multimediach: webworkery są stosowane do manipulacji obrazami, dźwiękiem i wideo w tle. Mogą pomóc w przetwarzaniu, optymalizacji, tworzeniu miniatur czy konwersji formatów,
asynchroniczne żądania sieciowe: webworkery pozwalają na wykonywanie asynchronicznych żądań sieciowych, takich jak pobieranie danych z serwera czy przetwarzanie odpowiedzi HTTP,
WebAssembly: webworkery są również używane w połączeniu z WebAssembly, umożliwiając wykonywanie bardziej zaawansowanych obliczeń, które są zoptymalizowane pod kątem wydajności.