Web Workers

Web Workers to potężna funkcjonalność HTML5, która pozwala na uruchamianie skryptów JavaScript w tle, na osobnych wątkach, bez wpływu na wydajność interfejsu użytkownika. Dzięki temu możliwe jest wykonywanie kosztownych obliczeń lub operacji bez zacinania się strony internetowej. Ta funkcjonalność jest nieoceniona w aplikacjach webowych wymagających intensywnych obliczeń lub w przypadku, gdy potrzebujemy asynchronicznie przetwarzać dane bez zakłócania głównego wątku strony.

Przykład użycia Web Worker

W tym przykładzie pokażemy, jak utworzyć prostego Web Workera, który będzie wykonywał obliczenia w tle, a następnie zwracał wynik do głównego wątku strony.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład użycia Web Worker</title>
    <script>
        // Sprawdzenie, czy przeglądarka wspiera Web Workers
        if (window.Worker) {
            // Inicjalizacja Web Workera
            const myWorker = new Worker('worker.js');

            // Nasłuchiwanie na wiadomość z powrotem od Workera
            myWorker.onmessage = function(e) {
                document.getElementById('result').textContent = 
                    'Wynik obliczeń: ' + e.data;
            };

            // Wysyłanie wiadomości do Workera
            myWorker.postMessage('Rozpocznij obliczenia');
        } else {
            document.getElementById('result').textContent = 
                'Twoja przeglądarka nie wspiera Web Workers.';
        }
    </script>
</head>
<body>
    <h3>Web Workers w HTML5</h3>
    <button onclick="myWorker.postMessage('Rozpocznij obliczenia')">Rozpocznij Obliczenia</button>
    <p id="result"></p>
</body>
</html>

W powyższym kodzie, worker.js jest zewnętrznym plikiem, który będzie zawierał logikę wykonującą obliczenia w tle. Przykład worker.js może wyglądać tak:

// Plik worker.js
onmessage = function(e) {
    console.log('Wiadomość otrzymana od głównego skryptu');
    let result = 0;
    // Proste obliczenie dla przykładu
    for (let i = 0; i < 1000000; i++) {
        result += i;
    }
    console.log('Wysyłanie wiadomości z powrotem do głównego skryptu');
    postMessage(result);
};

Podsumowanie

Web Workers oferują potężne możliwości do tworzenia responsywnych i wydajnych aplikacji webowych, umożliwiając wykonywanie intensywnych obliczeń w tle, bez wpływu na działanie interfejsu użytkownika. Dzięki oddzieleniu ciężkich operacji od głównego wątku, użytkownicy mogą cieszyć się płynnym i szybkim działaniem aplikacji. Pamiętaj, aby zawsze sprawdzać, czy przeglądarka użytkownika wspiera tę funkcjonalność.

Poprzedni
Następny

Scroll to Top