Latest web development tutorials

Web Workers HTML5

Pracownik internetowej wykonywanie kodu JavaScript w tle i nie ma wpływu na działanie strony.

Co to jest Web Worker?

Podczas wykonywania skryptu na stronie HTML, państwo strona nie odpowiada, dopóki skrypt jest kompletny.

Pracownik internetowej wykonywanie kodu JavaScript w tle, niezależnie od innych skryptów nie będzie miało wpływu na działanie strony. Można nadal robić, co chce zrobić: Kliknij, aby wybrać zawartość, etc., w czasie, gdy pracownik internetowa działa w tle.

Pomoc Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari i Opera wsparcia pracowników sieci.

przykłady HTML5 Web Workers

Poniższy przykład tworzy prosty robotnik internetowej, licząc w tle:

Przykłady

count:




Spróbuj »

demo_workers.js kod pliku:

var i = 0;

Funkcja timedCount ()
{
i = i + 1;
postMessage (I);
setTimeout ( "timedCount ()", 500);
}

timedCount ();

Wykrywanie, czy przeglądarka obsługuje Web Worker

Przed utworzeniem pracownika internetowej, sprawdź przeglądarka użytkownika wspiera go:

if (typeof (robotnik)! == "niezdefiniowany")
{
// Tak! Support worker WWW!
//Jakiś kod .....
}
więcej
{
Web Worker // Niestety nie jest obsługiwany
}

Utwórz plik pracownika internetowej

Teraz stwórzmy nasz pracownik internetową w zewnętrznym JavaScript.

Tutaj stworzyliśmy licznik skryptu. Skrypt jest przechowywany w "demo_workers.js" file:

var i = 0;

Funkcja timedCount ()
{
i = i + 1;
postMessage (I);
setTimeout ( "timedCount ()", 500);
}

timedCount ();

Ważna część kodu Powyższe metody postMessage () - służy do powrotu jakąś stronę HTML wiadomości.

Uwaga: pracownik internetowa nie jest powszechnie stosowane do takich prostych skryptów, ale dla większej liczby zadań obciążających procesor.

Tworzenie obiektu Web Worker

Mamy już plik pracownika internetową, a teraz musimy wywołać go od strony HTML.

Poniższy kod wykrywa obecność pracownika, jeśli nie ma to - to tworzy nowy pracownik internetowej obiekt, a następnie uruchomić "demo_workers.js" Kod:

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

Możemy wtedy odbyć i odbierać wiadomości od pracownika internetowej.

Dodaj do pracownika Web "onmessage" detektory zdarzeń:

w.onmessage = function (event) {
. Document.getElementById ( "Wynik") innerHTML = event.data;
};

Web Worker rozwiązanie

Kiedy utworzyć obiekt pracownik internetowej, nadal będzie nasłuchiwać wiadomości (nawet po zakończeniu skryptu zewnętrznego), dopóki nie zostanie zakończone.

Aby wypowiedzieć pracownikowi internetową i zwolnić zasoby przeglądarki / komputera, użyj metody terminate ():

w.terminate ();

Przykładowy kod Kompletna Web Worker

Widzieliśmy js kod Pracownik plików. Oto kod strony HTML:

Przykłady

<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> Ten poradnik (w3big.com) </ title>
</ Head>
<Body>

<P> Ilość: <wyjście id = "result"> </ wyjścia> </ p>
<Button onclick = "startWorker ()"> pracy </ button>
<Button onclick = "stopWorker ()"> zatrzymał </ button>

<P> <strong> Uwaga: </ strong> Internet Explorer 9 i wcześniejsze wersje IE nie obsługuje Web Workers </ p>.

<Script>
var w;

funkcjonować startWorker () {
if (typeof (robotnik)! == "niezdefiniowany") {
if (typeof (w) == "niezdefiniowany") {
w = nowego pracownika ( "demo_workers.js");
}
w.onmessage = function (event) {
. Document.getElementById ( "Wynik") innerHTML = event.data;
};
} Else {
document.getElementById ( "Wynik") innerHTML = "Niestety, Twoja przeglądarka nie obsługuje Web Workers ..." .;
}
}

Funkcja stopWorker ()
{
w.terminate ();
w = nieokreślone;
}
</ Script>

</ Body>
</ Html>

Spróbuj »

Web Workers i DOM

Od pracownika internetowej w zewnętrznym pliku, nie mogą uzyskać dostęp do obiektu JavaScript następujący przykład:

  • okno obiektu
  • Document Object
  • dominujące obiekty