API pracownika Web

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

Co to jest Web Worker?

Podczas wykonywania skryptu w stronie HTML, strona jest niesłuchalna do momentu zakończenia skryptu.

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., jednocześnie web worker działa w tle.

Obsługa przeglądarek

Liczby w tabeli oznaczają pierwsze wersje przeglądarek, które w pełni obsługują Web Workers:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
Styczeń 2010 roku Wrzesień 2012 roku Czerwiec 2009 roku Czerwiec 2009 roku Czerwiec 2011 roku

Instancja Web Worker

Poniższy przykład tworzy prosty Web Worker, który oblicza liczby w tle:

Przykład

Licznik:

Spróbuj sam

Sprawdź przeglądarkę Web Worker

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

if (typeof(Worker) !== "undefined") {
  // Tak! Obsługa Web worker!
  // Niektóry kod.....
}
  // Przepraszam! Brak obsługi Web Worker...
}

Tworzenie pliku Web Worker

Teraz, pozwólmy sobie na utworzenie naszego Web Worker w zewnętrznym JavaScriptie.

Tutaj tworzymy ważny skrypt. Skrypt ten przechowywany jest w pliku "demo_workers.js":

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

Ważnym elementem powyższego kodu jest postMessage() Metoda - do wysyłania wiadomości do strony HTML.

Uwaga:Zwykle web worker nie jest używany w prostych skryptach, ale do zadań obciążających procesor.

Tworzenie obiektu Web Worker

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

Poniższe linie kodu sprawdzają, czy worker istnieje, a 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 wysyłać i odbierać wiadomości z web worker.

Dodaj słuchacz "onmessage" do web worker.

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

Kiedy Web Worker publikuje wiadomość, wykonywany jest kod w słuchaczu wydarzeń. Dane z Web Worker przechowywane są w event.data.

Zakończenie Web Worker

Kiedy obiekt web worker jest tworzony, będzie nadal nasłuchiwać wiadomości (nawet po zakończeniu zewnętrznego skryptu) aż do momentu jego zakończenia.

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

w.terminate();

Ponowne użycie Web Worker

Jeśli zmienna worker ustawiona jest na undefined, po zakończeniu jej działania, możesz użyć poniższego kodu:

w = undefined;

Pełny przykład kodu Web Worker

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

Przykład

<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
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