HTML5 Web Workers_Motor Node Java College

Dedized Web Worker (Dedicated Web Worker) bietet eine einfache Möglichkeit, dass Webinhalte das Skript im Hintergrund ausführen können. Sobald der Arbeiter erstellt wurde, kann die Nachricht an die von seinem Schöpfer angegebene Ereignisüberwachungsfunktion übergeben werden, sodass alle vom Arbeiter generierten Aufgaben diese Nachrichten erhalten. Der Arbeiter -Thread kann Aufgaben ohne Interferenz -Benutzeroberfläche ausführen. Darüber hinaus kann es auch XMLHTTPrequest verwenden (obwohl die beiden Attributwerte von responsexml und Kanal immer null sind), um E/A -Operationen auszuführen. Dieser Artikel enthält Beispiele und Details, um die vorherigen Dokumente zu erstellen. Die Funktion, die dem Worker zur Verfügung gestellt wird, listet die vom Arbeiter unterstützten Funktionen auf.

Die Worker -Schnittstelle generiert einen realen Betriebssystem -Level -Thread. Für Webarbeiter werden jedoch Kommunikationspunkte mit anderen Threads sorgfältig kontrolliert, was bedeutet, dass es für Sie schwierig ist, Komplikationen zu verursachen. Sie haben keine Möglichkeit, nicht -betrügerische Sicherheitskomponenten oder DOMs zuzugreifen. Wenn Sie also keine Anstrengungen verbringen, können Sie keine Fehler machen. Arbeiter erzeugen

Es ist sehr einfach, einen neuen Arbeiter zu erstellen. Alles, was Sie tun müssen, ist, den Worker () -Konstruktor zu rufen und ein URI anzugeben, das ein Skript ausführen muss, das im Arbeiter -Thread ausgeführt wird. Spezifische Ereignisverarbeitungsfunktion.

 var myworker = neuer Arbeiter (my_task.js);

Oder Sie können auch addEventListener () verwenden:

 var myworker = neuer Arbeiter (my_task.js); Der Arbeiter.

Die erste Zeile im Beispiel erstellt einen neuen Arbeiter -Thread. Das dritte Gesetz legt die Überwachungsfunktion des Nachrichtenereignisses fest. Wenn Arbeiter eine eigene Funktion postMessage () aufruft, wird diese Veranstaltungsverarbeitungsfunktion aufgerufen. Schließlich wurde der Arbeiter -Thread in der siebten Zeile eingeführt. Hinweis: Der Parameter -URI, der den Arbeiterkonstruktor überträgt, muss der homologen Strategie folgen. Gegenwärtig unterscheiden sich verschiedene Browserhersteller immer noch, welche URIs den homologen Strategien folgen sollten. Blob Uri.

Die zwischen der Homepage und dem Arbeiter übertragenen Daten werden kopiert und nicht geteilt. Das an den Arbeiter übergebene Objekt muss serialisiert werden, und dann muss das nächste Ende serialisiert werden. Die Seite gibt nicht das gleiche Beispiel wie Worker. Die meisten Browser verwenden eine strukturierte Kopie, um diese Funktion zu erreichen.

Bevor wir untergehen, erstellen wir zum Zweck des Unterrichts eine Funktion namens Emulationsmessage ().

 Funktion Emulationsmessage (VVAL) {return eval; Boolean // Test #3V #3V ARMET3 = NEUE String (Hello World); , Alter: 43}; Var Beispiel5 = neuer Animal (CAT, 3);

Der Wert, der nicht gemeinsam genutzt wird, wird als Nachricht bezeichnet. Lassen Sie uns über den Arbeiter sprechen. Sie können die Nachricht postMessage () an den Haupt -Thread weitergeben oder sie aus dem Haupt -Thread zurücksenden. Das Datenattribut des Nachrichtenereignisses enthält Daten von Worker.

 var myworker = neuer Arbeiter (my_task.js); ;

Hinweis: Im Allgemeinen Hintergrund -Threads -inkludierende Arbeiter -auf DOM betrieben. Wenn der Hintergrund -Thread das DOM ändern muss, sollte er die Nachricht an seinen Gründer senden, damit der Ersteller diese Vorgänge abschließt.

Wie Sie sehen können, ist die zwischen Arbeiter und Homepage übertragene Nachricht immer "JSON -Nachricht", auch wenn es sich um eine ursprüngliche Art von Wert handelt. Daher können Sie JSON -Daten und/oder alle Datentypen übertragen, die serialisieren können:

 PostMessage ({cmd: init, timestamp: date.now ()});

Beispiele zum Übergeben von Daten

Beispiel Nr. 1: Erstellen Sie ein gemeinsames "asynchroner Eval ()".

Das folgende Beispiel führt vor, wie Eval () in Worker verwendet wird, um jede Art von JavaScript -Code in einer beliebigen Art von Asynchron in der Reihenfolge auszuführen::

 // syntax: asynceval (code [, listner]) var asynceval = (function () {var alistener = [], Oparser = neuer Arbeiter (Daten: text/javaScript; charSet = usasciii, OnMessage%20%3D%20function %20%28oEvent%29%20%7b%0a%09PostMessage%28%7b%09%09%22%22%20oEvent 20 -Eval%28OEvent.Data.Code%29%0A%09%7d%29%3B%0A%7d); data.id] (eevent.data.Valuated);} Alistener [eevent.data.id];}; : Alisteners.length -1, Code: Scode});};});

Beispiel Verwendung:

 // Asynchronous Warnmeldung ... Asynceval (3 + 2, Funktion (Smessage) {alert (3 + 2 = + smessage); // Asynchroner Druck ... asynceval (// Hallo Welt !!!/,,, Funktion (Shtml) {document.body.AppendChild (document.CreateTextNode (shtml);}); .Open (/get/, /http://www.mozilla.org//, false);/n/toreq.send (null);/n/treturn oreq.responsetext;/n});)););)); );));));));));)));));));)));))))));)));))));

Beispiel Nr. 2: Übertragen Sie die erweiterte Methode von JSON und erstellen Sie ein Austauschsystem

Wenn Sie sehr komplizierte Daten übertragen müssen und gleichzeitig mehrere Methoden auf der Homepage und auf der Arbeiter aufrufen müssen, können Sie in Betracht ziehen, ein System ähnlich wie folgt zu erstellen.

 <! Argument für die Übergabe von 1, Argument für 2 usw. usw.): Rufen Sie die abfragbare Funktion eines Arbeiters auf * Postmessage (String- oder JSON -Daten): Siehe Worker.Protodype. Funktion): Fügt einen Hörer hinzu * removelistener (Name): Entfernt einen Listener Quereeryker Instances Eigenschaften: * DefaultListListener: Der Standard -Listener -Executem, wenn der Arbeiter die postmessage () Funktion direkt */ function QueryableWorker (Surl, FDeFlistener, UNError) {var var var varlable anruft Oinstance = this, OWORCER = neuer Arbeiter (Surl), Olistener = {}; .data.hasownProperty (rnb93qh) {olisteners [eevent.data.vo42t30] .Apply (yevent.data.rnb99 3qh); {owster.onError = fonError;} this.sendQuery = Funktion (/ * Abfragbarer Funktionsname, Argument für das Übergeben von 1, Argument für 2, 2, 2 usw. usw. usw. */) {if (Argumente.length <1) {{ Neue TyPerror (Abfragbare Arbeitskräfte.SendQuery -nicht genügend Argumente); = Funktion (vmsg) {// Ich denke nur, dass es nicht nötig ist, Call () zu verwenden. Prototy Worker.Prototype.PostMessage.call (OWKER, VMSG); ] = Flistener;}; ] * /); ); A id = firstlink href = javaScript: omytask.sendQuery ('getDifferente', 5, 3);> Was ist der Unterschied zwischen 5 und 3? omytask.sendQuery ('Waitinging'); ) {// etwas tun} funct} funct ion myprivateFunc2 () {// etwas tun} // usw. Holen Sie sich den Unterschied zwischen zwei Nightrs: GetDiffferenz: Funktion (nminund, nsubtrahend) {Antwort (PrintSomething, Nminuend -nsubtrahend);}, // Beispiel #2: Warte drei Sekunden Waiting: function () {setTimeout () () {alerererererererers Tsomething, 3, Sex);}, 3000);}}; (/ * Hörername, Argument für das Bestehen von 1, Argument für 2 usw. usw. */) {if (Argumente.Length <1) {Neue Typerror werfen (Antwort -NOT enugh Argumente); : Argumente [0], rnb93qh: array.prototype.slice .call (Argumente, 1)});} OnMessage = Funktion (oevent) {if (eevent.data instanceof object && soownproperty) && DaeenPry (bk4e1h0). {AbfragableFunction [eevent.data .bk4e1h0] .Apply (self, oevent.data.ktp3fm1);} else {defaultQuery (eevent.data);}};

Dies ist eine sehr geeignete Methode, um die Nachrichten zwischen der Homepage zu wechseln-Arbeiter-oder das Gegenteil-das Gegenteil.

Daten durch Übertragen von Eigentum (übertragbares Objekt) übertragen

Google Chrome 17 und Firefox 18 enthalten eine andere Methode mit einer höheren Leistung, um den spezifischen Objekttyp (übertragbares Objekt) an einen Arbeiter/Rückseite vom Arbeiter zu übergeben. Das Übertragungsobjekt wird ohne Kopieroperation von einem Kontext in einen anderen Kontext übertragen. Dies bedeutet, dass es bei der Übergabe von Big Data eine großartige Leistungsverbesserung erzielt. Wenn Sie aus der C/C ++ - Welt kommen, stellen Sie sich vor, dass sie sich als Übertragung gemäß Referenz vorstellen. Im Gegensatz zur Vermittlung gemäß der Referenz wird die Version, die der ursprüngliche Kontext nicht mehr existiert, nach der Übertragung des Objekts jedoch nicht mehr. Das Eigentum des Objekts wird in den neuen Kontext übertragen. Wenn Sie beispielsweise ein ArrayBuffer -Objekt aus der Hauptanwendung auf den Arbeiter übertragen, wird der ursprüngliche ArrayBuffer gelöscht und kann nicht verwendet werden. Der Inhalt, den es enthält (vollständig), wird an den Arbeiterkontext übergeben.

 // Erstellen Sie eine 32MB -Datei und füllen Sie sie. ;

Bei Bedarf kann der Arbeiter mehr Arbeiter generieren. Dies heißt Subworker, der in derselben Quelle wie die übergeordnete Seite hosten muss. Auf die gleiche Weise analysiert Subworker eher die Adresse des URI als seine eigene Seite anstelle seiner eigenen Seite. Dadurch überwacht der Arbeiter ihre Abhängigkeit leicht. Chrome unterstützt Subworker nicht.

Derzeit gibt es keine "offizielle" Methode, die den Worker -Code in eine Webseite wie <Script> -Elemente einbetten kann. Wenn jedoch ein <skript> -Element keine SRC-Eigenschaften aufweist und seine Typeigenschaften nicht als laufende MIME-Typ angegeben werden, wird es als Datenblockelement angesehen und kann von JavaScript verwendet werden. "Data Block" ist eine sehr häufige Funktion in HTML5, die nahezu jede Art von Texttypdaten tragen kann. Daher können Sie einen Arbeiter auf folgende Weise einbetten:

 <! . Var myvar = Hallo Welt!; // Der verbleibende Arbeitercode ist hier geschrieben. </script> <script type = text/javaScript> // Das Skript wird vom JS-Engine analysiert, da sein MIME-Typ Text/JavaScript ist. Funktion pagelog (smsg) {// Fragment verwenden: Auf diese Weise wird der Browser nur rendern/auferweckt. var OfRagm = Dokument.CreatedOcumentFragment (); -Workr> // Dieses Skript wird nicht von der JS-Engine analysiert, da sein MIME-Typ Text/JS-Arbeiter ist. OnMessage = Funktion (oevent) {postMessage (myvar);}; </script> <script type = text/javaScript> // Das Skript wird vom JS-Engine analysiert, da sein MIME-Typ Text/JavaScript ist. // In der Vergangenheit verwenden wir den Blob Builder // ... aber jetzt verwenden wir Blob ...: var blob = new Blob (Array.Prototype.map.call = =/text // JS- WorkR/], Funktion (Oscript) {return oscript.textContent;}), {Typ: text/javascript}); . document.worker = new Worker (Fenster.Url.CreateObjecturl (BLOB)); () {document.worker.postMessage ();};

Jetzt wurde der eingebettete Arbeiter in ein maßgeschneidertes Dokument eingesetzt. Arbeitereigenschaft.

Arbeiter können Timeout und Intervall wie den Hauptfaden verwenden. Dies ist beispielsweise sehr nützlich, wenn Sie den Worker -Thread regelmäßig ohne ununterbrochene laufende Code möchten.

Wenn Sie einen Arbeitnehmer sofort kündigen möchten, können Sie die Beendigung () -Methode von Worker anrufen ::

 myworker.termate ();

Der Arbeiter -Thread wird sofort getötet und hinterlässt keine Gelegenheit, ihm seine eigene Operation oder Aufräumarbeiten abzuschließen.

Die Arbeitnehmer können auch Ihre eigene NSIWORKERSCOPE.CLOSE () -Methode anrufen, um sich selbst zu schließen:

 self.close ();

Wenn der Arbeiter Laufzeitfehler sind, wird die Funktion für die Verarbeitung von Onerror -Ereignissen aufgerufen. Es empfängt ein Ereignis, das den Errorvent -Schnittstellennamenfehler implementiert. Der Vorfall wird nicht sprudeln und kann abgesagt werden. Das Fehlerereignis enthält die folgenden drei Felder, an denen interessiert sind:

Lesbare Fehlermeldungen.

Fehlersskriptateiname.

Die Zeilennummer der Skriptdatei, wenn ein Fehler auftritt.

Arbeiter können in ihrem Bereich zugreifen. Es enthält die folgende Zeichenfolge, die den Browser erkennen kann, da dies in gewöhnlichen Skripten erledigt wird:

• Eappname
• IAppversion
• Platform
• Touseragent

Der Worker -Thread kann auf eine globale Funktion zugreifen, Importscripts (), mit der Worker das Skript oder die Bibliothek in seinen eigenen Bereich einführen kann. Sie können die URI ohne die Parameter oder an die URI von mehreren Skripten einführen.

 Importscripts (); */

Der Browser lädt und führt das Skript aus. Die globalen Objekte in jedem Skript können von Worker verwendet werden. Wenn das Skript nicht geladen werden kann, wird die Network_error -Ausnahme ausgeworfen und der nächste Code wird nicht ausgeführt. Der zuvor ausgeführte Code (einschließlich des Code, der mit window.settimeout () ausgeführt wurde) kann weiterhin verwendet werden. Die Funktionserklärung nach Importscripts () kann weiterhin verwendet werden, da sie immer vor einem anderen Code ausgeführt werden. Hinweis: Die Download -Reihenfolge des Skripts ist nicht behoben, die Reihenfolge wird jedoch bei Ausführung in die Importscripts () () übergeben. Dies wird gleichzeitig abgeschlossen;

Dieser Abschnitt enthält mehrere Beispiele für die Verwendung von DOM -Arbeitern.

Vorgänge im Hintergrund ausführen

Einer der Vorteile des Arbeiters besteht darin, dass er den dichten Betrieb des Prozessors ausführen kann, ohne den UI -Thread zu blockieren. Im folgenden Beispiel wird der Arbeiter verwendet, um Fibona zu berechnen.

JavaScript -Code

Der folgende JavaScript -Code wird in der Datei "fibonacci.js" gespeichert, die der HTML -Datei im nächsten Abschnitt zugeordnet ist.

 Var Ergebnisse = []; Funktion ErrorReceiver (Ereignis) {Throw Event.data;} OnMessage = Funktion (Ereignis) {var n = parseInt (Ereignis); } Für (var i = 1; i <= 2; i ++) {var Worker = New Worker (Fibonacci.js);

Der Arbeiter legt das Attribut auf eine Funktion fest. (Beachten Sie, dass diese Verwendung nicht mit der Definition einer globalen Variablen mit demselben Namen oder einer Funktion desselben Namens ist. Die von der Webseite gesendete Nachricht.) Auf diese Weise ermöglicht die Rekursion und generiert Ihre neue Kopie, um jeden Berechnungskreis zu verarbeiten.

HTML -Code

 <! = neuer Arbeiter (fibonacci.js); = Funktion (Fehler) {Dump (Worker -Fehler: + Fehler.Message +/n);

Die Webseite erstellt ein DIV -Element, die ID ist Ergebnis, die es verwendet, um das Berechnungsergebnis anzuzeigen und dann einen Arbeiter zu generieren. Nach dem Generieren eines Arbeiters ist die OnMessage -Verarbeitungsfunktion so konfiguriert, dass die Berechnungsergebnisse angezeigt werden, indem der Inhalt des DIV -Elements festgelegt wird, und dann wird die OnError -Verarbeitungsfunktion auf die Speicherfehlerinformationen eingestellt. Senden Sie schließlich eine Nachricht an den Arbeiter, um sie zu starten.