Web Workers w HTML

Web worker to JavaScript działający w tle, który nie wpływa na wydajność strony.

Co to jest Web Worker?

Gdy skrypt jest wykonywany na stronie HTML, strona jest niedostępna, aż skrypt zostanie zakończony.

Web worker to JavaScript działający w tle, niezależny od innych skryptów, który nie wpływa na wydajność strony. Możesz kontynuować każdą czynność, jak kliknięcia, wybór treści itp., podczas gdy web worker działa w tle.

Wsparcie przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która obsługuje Web Worker w pełni.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

Przykład Web Worker w HTML

Poniższy przykład tworzy prosty web worker, który liczy w tle:

Licznik:

Spróbuj sam

Sprawdzenie obsługi Web Worker

Przed utworzeniem web workera, sprawdź, czy przeglądarka użytkownika obsługuje go:

if (typeof(Worker) !== "undefined") {
    // Tak! Obsługuje Web worker!
    // Niektóry kod.....
}
    // Przykro mi! Nie obsługuje Web Worker!
}

Tworzenie pliku Web Worker

Teraz, pozwólmy sobie stworzyć nasz web worker w zewnętrznym pliku JavaScript.

Tutaj tworzymy skrypt licznika. Skrypt ten znajduje się w pliku "demo_workers.js":

var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

Ważnym elementem w powyższym kodzie jest metoda postMessage() - służy do wysyłania wiadomości do strony HTML.

Komentarz: Web worker zazwyczaj nie jest używany w tak prostych skryptach, ale do bardziej obciążających zasoby CPU zadań.

Tworzenie obiektu Web Worker

Teraz mamy plik web worker, musimy go wywołać z strony HTML.

Poniższe linie kodu sprawdzają, czy istnieje worker, jeśli nie, - tworzy nowy obiekt web worker i uruchamia kod z pliku "demo_workers.js":

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

Następnie możemy odbierać wiadomości od web worker.

Dodaj słuchacz "onmessage" do web worker:

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

Kiedy web worker przesyła wiadomość, wykonywany jest kod w słuchaczu wydarzeń. Dane z web worker przechowywane są w event.data.

Zakończenie Web Worker

Po utworzeniu web worker, będzie on nadal nasłuchiwał wiadomości (nawet po zakończeniu zewnętrznego skryptu) do momentu jego zakończenia.

Aby zakończyć web worker i zwolnić zasoby przeglądarki/komputera, użyj metody terminate():

w.terminate();

Ponowne użycie Web Worker

Jeśli ustawisz zmienną worker na niezdefiniowaną, możesz powtórzyć to kod po jego zakończeniu:

w = niezdefiniowane;

Pełny przykład Web Worker

Już widzieliśmy kod Worker w pliku .js. Poniżej znajduje się kod strony HTML:

Przykład

<!DOCTYPE html>
<html>
<body>
<p>Licz liczby: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Spróbuj sam

Web Worker i DOM

Ponieważ web worker znajduje się w pliku zewnętrznym, nie może uzyskać dostępu do poniższych obiektów JavaScript:

  • Obiekt window
  • Obiekt document
  • Obiekt parent