HTML Web Workers

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

Co to jest Web Worker?

Kiedy skrypt jest wykonywany na stronie HTML, strona jest niewywoływana, aż skrypt się zakończy.

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ć robienie tego, co chcesz: klikanie, wybieranie treści itp., podczas gdy web worker działa w tle.

Obsługa przeglądarek

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

API
Web Worker 4.0 10.0 3.5 4.0 11.5

Przykład HTML Web Workers

Poniższy przykład tworzy prostego web workera, 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óre kody.....
}
    // Przykro mi! Nie obsługuje Web Worker!
}

Tworzenie pliku Web Worker

Teraz, stworzymy nasz web worker w zewnętrznym pliku JavaScript.

Tutaj tworzymy skrypt liczenia. 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ższy wiersz kodu sprawdza, 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 zdarzeń. 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 undefined, możesz powtórnie użyć tego kodu po jego zakończeniu:

w = undefined;

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 mogą one uzyskać dostępu do poniższych obiektów JavaScript:

  • Obiekt window
  • Obiekt document
  • Obiekt parent