HTML5 Web Workers
Web-Worker JavaScript im Hintergrund laufen und hat keine Auswirkungen auf die Leistung der Seite.
Was ist ein Web Worker?
Wenn ein Skript in einer HTML-Seite ausgeführt wird, ist die Seite Zustand nicht mehr reagiert, bis das Skript abgeschlossen ist.
Web-Worker JavaScript im Hintergrund ausgeführt werden, unabhängig von anderen Skripten nicht die Leistung der Seite beeinflussen. Sie können auch weiterhin zu tun, was bereit ist zu tun: Klicken Sie auf Inhalt auszuwählen, usw., zu einer Zeit als Web-Arbeiter im Hintergrund läuft.
Browser-Unterstützung
Internet Explorer 10, Firefox, Chrome, Safari und Opera-Support-Mitarbeiter.
HTML5 Web Workers Beispiele
Das folgende Beispiel erzeugt eine einfache Web-Arbeiter, im Hintergrund zu zählen:
demo_workers.js Datei Code:
Funktion timedCount ()
{
i = i + 1;
postmessage (i);
setTimeout ( "timedCount ()", 500);
}
timedCount ();
Erkennen, ob der Browser die Web Worker unterstützt
Bevor Sie einen Web-Arbeiter zu schaffen, überprüfen Sie bitte den Browser des Benutzers unterstützt:
{
// Ja, Web Worker Unterstützung!
Einige Code//.....
}
sonst
{
// Es tut uns Leid! Web Worker wird nicht unterstützt
}
Erstellen einer Web-Worker-Datei
Jetzt wollen wir unsere Web-Arbeiter in einer externen JavaScript erstellen.
Hier haben wir ein Skript Zahl erstellt. Das Skript wird in der "demo_workers.js" Datei gespeichert:
Funktion timedCount ()
{
i = i + 1;
postmessage (i);
setTimeout ( "timedCount ()", 500);
}
timedCount ();
Wichtiger Teil des Codes oben ist postmessage () -Methode - es verwendet wird, eine HTML-Seite Nachrichten zurückzukehren.
Hinweis: Web - Arbeiterist in der Regel nicht für eine solche einfache Skripte verwendet, aber für mehr CPU-intensive Aufgaben.
Erstellen einer Web-Worker-Objekt
Wir haben bereits eine Web-Worker-Datei, und jetzt müssen wir es von einer HTML-Seite aufzurufen.
Der folgende Code erkennt das Vorhandensein des Arbeitnehmers, wenn es keine ist - es hat eine neue Web-Worker-Objekt erstellt und dann "demo_workers.js" Code ausführen:
{
w=new Worker("demo_workers.js");
}
Wir können dann stattfinden, und Empfangen von Nachrichten von der Web-Arbeiter.
In den Web-Arbeiter ein "onmessage" Ereignis-Listener:
. Document.getElementById ( "Ergebnis") innerHTML- = event.data;
};
Web Worker Kündigung
Wenn wir eine Web-Arbeiter-Objekt erstellen, wird es weiterhin für Nachrichten (auch nach der Beendigung eines externen Script) zu hören, bis er durch beendet.
Um einen Web-Arbeiter beenden, und lassen Sie die Browser / Computer-Ressourcen, verwenden Sie die Methode terminate ():
Komplette Web Worker Beispielcode
Wir haben Js Datei Worker Code gesehen. Hier ist der Code HTML-Seite:
Beispiele
<Html>
<Head>
<Meta charset = "UTF-8">
<Titel> Dieses Tutorial (w3big.com) </ title>
</ Head>
<Body>
<P> count: <output id = "Ergebnis"> </ output> </ p>
<Schaltfläche Onclick = "startWorker ()"> arbeiten </ button>
<Schaltfläche Onclick = "stopWorker ()"> gestoppt </ button>
<P> <strong> Hinweis: </ strong> Internet Explorer 9 und früheren Versionen von IE-Browser Web Worker nicht unterstützt </ p>.
<Script>
var w;
funktionieren startWorker () {
if (typeof (Arbeiter)! == "undefined") {
if (typeof (w) == "undefined") {
w = new Worker ( "demo_workers.js");
}
w.onmessage = function (event) {
. Document.getElementById ( "Ergebnis") innerHTML- = event.data;
};
} Else {
document.getElementById ( "Ergebnis") innerHTML- = "Sorry, Ihr Browser unterstützt keine Web Workers ..." .;
}
}
Funktion stopWorker ()
{
w.terminate ();
w = nicht definiert;
}
</ Script>
</ Body>
</ Html>
Versuchen »
Web Workers und die DOM
Da der Web-Arbeiter in einer externen Datei, können sie keinen Zugriff auf das JavaScript das folgende Beispiel-Objekt:
- Fensterobjekt
- Dokument-Objekt
- geordnete Objekte