web worker jest JavaScript działa w tle, bez wpływu na wydajność strony.
Co jest Web Worker ?
Podczas wykonywania skryptów na stronie HTML, strona przestaje odpowiadać aż skrypt zostanie zakończony.
Pracownik www, jak określono przez World Wide Web Consortium (W3C) oraz Web Application Technology Working Group Hypertext (WHATWG), jest skrypt JavaScript wykonywany od strony HTML, który działa w tle, niezależnie od innych skryptów interfejsu użytkownika, które może też być wykonana z tej samej strony HTML. Pracownicy sieci są często w stanie bardziej efektywnie wykorzystać wielordzeniowe procesory.
Przegląd
Jak przewidziano przez WHATWG pracownicy internetowe są stosunkowo dużej gramaturze. Oczekuje się być długowieczne, mają wysoki koszt wykonania rozruchu, a wysoki koszt instancji pamięci.
Pracownicy sieci nie są zamierzone lub spodziewane być stosowane w dużych ilościach, ponieważ mogą wieprz zasobów systemowych.
Pracownicy sieci pozwalają na równoczesne wykonanie gwintów przeglądarkę i jednego lub więcej wątków JavaScript uruchomiony w tle. Przeglądarka której następuje pojedynczą nić wykonanie będzie musiał czekać na programach JavaScript, żeby zakończyć wykonywanie przed postępowaniem i może to zająć dużo czasu, który programista może chcesz ukryć przed użytkownikiem.
Pozwala to na przeglądarce do kontynuowania normalnej pracy podczas wykonywania skryptu w tle. Specyfikacja pracownik internetowa jest oddzielny specyfikacja ze specyfikacji HTML5 i może być używany z HTML5.
Istnieją dwa rodzaje pracowników internetowych: dedykowane i udostępnione pracownikom.
Kiedy robotnicy internetowych działać w tle, nie mają bezpośredniego dostępu do DOM jednak komunikować się z dokumentem przez przekazywanie komunikatów. Pozwala to na wykonanie wielowątkowych programów JavaScript.
Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje Web Workers .
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10,0 | 3.5 | 4.0 | 11,5 |
HTML Web Workers Przykład
Poniższy przykład tworzy prosty web worker , że liczyć numery w tle:
Sprawdzić Web Worker Wsparcie
Przed utworzeniem web worker , należy sprawdzić, czy przeglądarka użytkownika obsługuje go:
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
Tworzenie Web Worker File
Teraz stwórzmy nasz web worker w zewnętrznym JavaScript.
Tutaj możemy utworzyć skrypt zliczający. Skrypt jest przechowywany w "/html/demo_workers.js" pliku:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
Ważną część kodu powyżej jest postMessage() metoda - który jest używany do wysyłania wiadomości z powrotem do strony HTML.
Note: Normalnie web workers nie są wykorzystywane do takich prostych skryptów, ale dla większej liczby zadań wykonywanych przez procesor intensywne.
Tworzenie Web Worker Object
Teraz, gdy mamy web worker plik, musimy wywołać ją od strony HTML.
Następujące linie sprawdza, czy web worker już istnieje, jeśli nie - to tworzy nowy web worker obiekt i uruchamia kod w "/html/demo_workers.js" :
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
Wtedy możemy wysyłać i odbierać wiadomości od web worker .
Dodać "onmessage" detektor zdarzeń do web worker .
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Kiedy web worker posty komunikatu, kod wewnątrz detektora zdarzeń jest wykonywany. Dane z web worker jest przechowywana w event.data.
Zakończyć Web Worker
Kiedy web worker obiekt jest tworzony, będzie nadal słuchać wiadomości (even after the external script is finished) , dopóki nie zostanie zakończone.
Aby wypowiedzieć web worker i bezpłatne Przeglądarka / zasobów komputera, należy terminate() metodę:
w.terminate();
Ponownego użycia Web Worker
Jeśli w ustawieniu web worker zmiennej niezdefiniowany, po to zostało zakończone, można ponownie użyć kodu:
w = undefined;
Pełna Web Worker Przykładowy kod
Widzieliśmy już ten Web Worker kod w .js pliku. Poniżej znajduje się kod do 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>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html> Spróbuj sam " Web Workers i DOM
Ponieważ web workers są w plikach zewnętrznych, nie mają dostępu do następujących obiektów JavaScript:
- Przedmiotem okno
- Obiekt document
- Obiekt rodzic