Jak korzystać z web worker w JavaScript?

By /

JavaScript

Web Workers to potężna funkcja JavaScript, która pozwala na wykonywanie skryptów w tle, na osobnym wątku, nie blokując interfejsu użytkownika ani innych skryptów. To idealne rozwiązanie dla zadań wymagających intensywnych obliczeń lub długotrwałych operacji, które mogłyby wpłynąć na płynność działania strony. W tej lekcji pokażemy, jak utworzyć i komunikować się z Web Workerem.

Tworzenie prostego Web Workera

Krok 1: Utworzenie pliku Web Workera

Pierwszym krokiem jest utworzenie pliku JavaScript, który będzie działał jako Web Worker. Załóżmy, że plik nazywa się worker.js. W tym pliku umieścimy kod, który ma być wykonany w tle:

// worker.js - Plik Web Workera

// Nasłuchiwanie na wiadomość od głównego wątku
self.addEventListener('message', function(e) {
    // Przetwarzanie danych otrzymanych od głównego wątku
    let result = e.data * 2; // Przykładowe przetwarzanie

    // Wysyłanie wyniku z powrotem do głównego wątku
    postMessage(result);
});
Krok 2: Użycie Web Workera w głównym skrypcie

Następnie musimy utworzyć i skomunikować się z naszym workerem z głównego skryptu strony:

<!DOCTYPE html>
<html>
<head>
    <title>Użycie Web Worker w JavaScript</title>
</head>
<body>
    <script>
        // Sprawdzenie, czy przeglądarka wspiera Web Workers
        if (window.Worker) {
            // Tworzenie nowego Web Workera
            const myWorker = new Worker('worker.js');

            // Wysyłanie danych do Workera
            // Przykład wysłania liczby 10 
            myWorker.postMessage(10); 

            // Nasłuchiwanie na wiadomość zwrotną od Workera
            myWorker.addEventListener('message', function(e) {
                console.log('Wiadomość od workera:', e.data);
            }, false);
        } else {
            console.log('Twoja przeglądarka nie wspiera Web Workers.');
        }
    </script>
</body>
</html>

Podsumowanie

W tej lekcji nauczyliśmy się, jak używać Web Workerów w JavaScript, aby wykonywać skrypty w tle, nie zakłócając działania interfejsu użytkownika. Web Workery są idealne do przetwarzania danych w tle, co pozwala na utrzymanie responsywności strony nawet podczas wykonywania złożonych operacji. Pamiętaj, że komunikacja między głównym wątkiem a workerem odbywa się poprzez przesyłanie wiadomości, co wymaga serializacji i deserializacji danych. Web Workery otwierają nowe możliwości dla aplikacji webowych, umożliwiając tworzenie bardziej skomplikowanych i wydajnych rozwiązań.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

 

Powiązane artykuły

Scroll to Top