Web Workers API
Web worker to skrypt JavaScript działający w tle, który nie wpływa na wydajność strony.
Co to jest pracownik sieciowy?
Podczas wykonywania skryptów na stronie HTML strona przestaje odpowiadać, dopóki skrypt nie zostanie ukończony.
Web worker to JavaScript, który działa w tle, niezależnie od innych skryptów, bez wpływu na wydajność strony. Możesz nadal robić, co chcesz: klikać, wybierać rzeczy itp., podczas gdy pracownik sieciowy działa w tle.
Obsługa przeglądarki
Liczby w tabeli określają pierwsze wersje przeglądarek, które w pełni obsługują Web Workers:
| Chrome 4 | IE 10 | Firefox 3.5 | Safari 4 | Opera 11.5 |
| Jan 2010 | Sep 2012 | Jun 2009 | Jun 2009 | Jun 2011 |
Przykład Web Workers
Poniższy przykład tworzy prostego robota sieciowego, który liczy liczby w tle:
Przykład
Sprawdź wsparcie Web Worker
Przed utworzeniem web workera sprawdź, czy przeglądarka użytkownika go obsługuje:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Utwórz plik Web Worker
Teraz stwórzmy naszego webworkera w zewnętrznym JavaScript.
Tutaj tworzymy skrypt, który się liczy. Skrypt jest przechowywany w pliku „demo_workers.js”:
let i = 0;
function timedCount()
{
i ++;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
Ważną częścią powyższego kodu jest postMessage()metoda - która służy do wysyłania wiadomości z powrotem na stronę HTML.
Uwaga: Zwykle pracownicy sieci Web nie są wykorzystywani do takich prostych skryptów, ale do zadań bardziej obciążających procesor.
Utwórz obiekt Web Worker
Teraz, gdy mamy już plik Web Worker, musimy wywołać go ze strony HTML.
Poniższe wiersze sprawdzają, czy worker już istnieje, jeśli nie – tworzy nowy obiekt web worker i uruchamia kod w „demo_workers.js”:
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
Następnie możemy wysyłać i odbierać wiadomości od pracownika sieci.
Dodaj detektor zdarzeń „onmessage” do pracownika sieci Web.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Gdy pracownik sieciowy opublikuje komunikat, wykonywany jest kod w detektorze zdarzeń. Dane od pracownika sieci są przechowywane w event.data.
Zakończ pracę Web Workera
Po utworzeniu obiektu Web Worker będzie on nadal nasłuchiwał komunikatów (nawet po zakończeniu skryptu zewnętrznego) aż do jego zakończenia.
Aby usunąć pracownika WWW i uwolnić zasoby przeglądarki/komputera, użyj
terminate()metody:
w.terminate();
Ponowne użycie narzędzia Web Worker
Jeśli ustawisz zmienną roboczą na undefined, po jej zakończeniu możesz ponownie użyć kodu:
w = undefined;
Pełny przykładowy kod Web Worker
Widzieliś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>
Web Workers i DOM
Ponieważ pracownicy sieci Web znajdują się w plikach zewnętrznych, nie mają dostępu do następujących obiektów JavaScript:
- Obiekt okna
- Przedmiot dokumentu
- Obiekt nadrzędny