Raid auf HTML5-Javascript-API-Erweiterung 1 – Web Worker Asynchronous Execution und zugehörige Überblick_HTML5-Tutorialfähigkeiten

Javascript-Ausführungsmechanismus
Vor HTML5 funktionierte die Ausführung von JavaScript in Browsern in einer Single-Thread-Methode, obwohl es viele Möglichkeiten gibt, Multi-Threading zu simulieren (zum Beispiel: in Javascript setinterval-Methode, setTimeout-Methode). , usw.), aber im Wesentlichen wird die Ausführung des Programms immer noch von der JavaScript-Engine im Rahmen einer Single-Thread-Planung durchgeführt. Der in HTML5 eingeführte Worker-Thread ermöglicht es der browserseitigen Javascript-Engine, gleichzeitig Javascript-Code auszuführen, wodurch eine gute Unterstützung für die browserseitige Multithread-Programmierung erreicht wird.

Mehrere Threads in Javascript – WebWorker
Web Worker in HTML5 kann in zwei verschiedene Thread-Typen unterteilt werden, einer ist ein dedizierter Thread „Dedicated Worker“ und der andere ist ein gemeinsam genutzter Thread „Shared“. Arbeitnehmer. Beide Arten von Threads dienen unterschiedlichen Zwecken.
Dedizierter Web-Worker
Ein dedizierter Worker ist mit dem Skript verbunden, das ihn erstellt hat. Er kann mit anderen Workern oder Browserkomponenten kommunizieren, aber nicht mit dem DOM. Die Bedeutung von dediziert ist meiner Meinung nach, dass dieser Thread jeweils nur eine Anforderung behandelt. Dedizierte Threads sind in verschiedenen Mainstream-Browsern außer IE implementiert und können bedenkenlos verwendet werden.
Einen Thread erstellen
Das Erstellen eines Workers ist sehr einfach. Übergeben Sie einfach den Dateinamen der JavaScript-Datei, die im Thread ausgeführt werden muss.
Thread-Kommunikation
Zur Kommunikation zwischen dem Haupt-Thread und dem Sub-Thread werden die Methoden postMessage und onmessage des Thread-Objekts verwendet. Unabhängig davon, wer Daten an wen sendet, verwendet der Absender die postMessage-Methode und der Empfänger die onmessage-Methode, um Daten zu empfangen. postMessage hat nur einen Parameter, nämlich die übertragenen Daten, und onmessage hat auch nur einen Parameter. Wenn es sich um ein Ereignis handelt, werden die empfangenen Daten über event.data abgerufen.
JSON-Daten senden
JSON wird von JS nativ unterstützt. Es ist nicht nötig, JSON umsonst zu verwenden, um komplexe Daten zu übertragen. Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

postMessage({ 'cmd': 'init', 'timestamp': Date.now()});

Fehlerbehandlung
Wenn in einem Thread ein Fehler auftritt, ist dies ein Fehler Der Ereignisrückruf wird ein Anruf sein. Der Umgang mit Fehlern ist also sehr einfach, indem das onerror-Ereignis der Thread-Instanz verknüpft wird. Diese Rückruffunktion verfügt über einen Parameter „error“, der aus drei Feldern besteht: „message“ – die Fehlermeldung; „filename“ – die Skriptdatei, in der der Fehler aufgetreten ist; „line“ – die Zeile, in der der Fehler aufgetreten ist.
Zerstöre den Thread
Verwende innerhalb des Threads die Close-Methode, um sich selbst zu zerstören. Verwenden Sie im Hauptthread außerhalb des Threads die Terminate-Methode der Thread-Instanz, um den Thread zu zerstören.
Sehen wir uns die grundlegende Funktionsweise von Threads anhand eines Beispiels an:
HTML-Code:

Code kopieren

Der Code lautet wie folgt:

function(){
var worker = new Worker('fibonacci.js');
worker.onmessage = function(event) {
console.log("Result:" event.data); >};
worker.onerror = function(error) {
console.log("Error:"
};
< /script>



Skriptdatei fibonacci.js-Code:





Code kopieren

Der Code lautet wie folgt:


/ /fibonacci.js

var fibonacci = function(n) {

return n < 2 ? n : arguments.callee(n - 1) arguments.callee(n - 2); >onmessage = function(event) { var n = parseInt(event.data, 10); postMessage(fibonacci(n)};

Put them Gehen Sie in dasselbe Verzeichnis und führen Sie die Seite Datei aus. Überprüfen Sie die Konsole. Sie können die Ergebnisse des Vorgangs sehen.

Eine weitere Sache hier ist, dass im Hauptthread das onmessage-Ereignis auf andere Weise eingehängt werden kann:

Code kopieren


Der Code lautet wie folgt:

worker.addEventListener('message', function(event) {
console.log("Result:" event.data);
}, false );

Ich persönlich halte es für sehr problematisch, daher ist es besser, onmessage direkt zu verwenden.
Andere Skriptdateien verwenden
Arbeitsthreads können die globale Methode importScripts verwenden, um andere domäneninterne Skriptdateien oder Klassenbibliotheken zu laden und zu verwenden. Folgende Verwendungen sind beispielsweise zulässig:

Kopieren Sie den Code

Der Code lautet wie folgt:

importScripts();/* importiert nichts */
importScripts('foo.js'); /* importiert nur "foo.js" */
importScripts('foo.js', 'bar .js') ;/* importiert zwei Skripte */

Nach dem Import können Sie die Methoden in diesen Dateien direkt verwenden. Schauen Sie sich online ein kleines Beispiel an:

Kopieren Sie den Code

Der Code lautet wie folgt:

/* *
* Verwenden Sie die Methode importScripts, um externe Ressourcenskripte einzuführen. Hier verwenden wir die Bibliothek des mathematischen Formelberechnungstools math_utilities.js.
* Wenn die JavaScript-Engine das Laden dieser Ressourcendatei abgeschlossen hat, fahren Sie mit der Ausführung des folgenden Codes fort. Gleichzeitig kann der folgende Code auf
*-Variablen und Methoden zugreifen und diese aufrufen, die in Ressourcendateien definiert sind.
**/
importScripts('math_utilities.js');
onmessage = function (event)
{
var first = event.data.first; var second = event .data.second;
calculate(first,second) {
//führen Sie die Berechnung durch
var common_divisor= divisor(first, second);
var common_multiple=multiple(first,second);
postMessage("Arbeit erledigt! "
"Das kleinste gemeinsame Vielfache ist " common_divisor
" und der größte gemeinsame Teiler ist " common_multiple);
}


Einige Internetnutzer im Internet dachten auch darüber nach, hier die importScripts-Methode zu verwenden, um das Problem des Vorladens von Ressourcen zu lösen (der Browser lädt die Ressource im Voraus, ohne sie zu analysieren und auszuführen). die Ressource). Der Grund ist auch sehr einfach.

Thread-Verschachtelung

Sie können auch Sub-Threads im Worker-Thread erstellen, und die verschiedenen Vorgänge sind immer noch dieselben. Synchronisierungsprobleme

Worker verfügt nicht über einen Sperrmechanismus und Multithread-Synchronisierungsprobleme können nur durch Code gelöst werden (z. B. durch das Definieren von Signalvariablen). Shared SharedWebWorker

Shared Web Worker eignet sich hauptsächlich für Probleme mit der Parallelität mehrerer Verbindungen. Da mehrere Verbindungen verarbeitet werden müssen, unterscheidet sich seine API geringfügig von der eines dedizierten Workers. Abgesehen davon haben Shared Web Worker ebenso wie dedizierte Worker keinen Zugriff auf das DOM und nur eingeschränkten Zugriff auf Formulareigenschaften. Shared Web Worker können auch nicht über das Netzwerk kommunizieren. Seitenskripte können mit gemeinsam genutzten Web-Workern kommunizieren. Im Gegensatz zu dedizierten Web-Workern (die zur Kommunikation einen impliziten Port verwenden) erfolgt die Kommunikation jedoch explizit über die Verwendung eines Portobjekts. Dies erfolgt durch Anhängen eines Nachrichtenereignishandlers .
Nach dem Empfang der ersten Nachricht vom Web-Worker-Skript hängt der freigegebene Web-Worker einen Event-Handler an den aktivierten Port an. Normalerweise führt der Handler seine eigene postMessage()-Methode aus, um eine Nachricht an den aufrufenden Code zurückzugeben, und dann generiert die start()-Methode des Ports einen gültigen Nachrichtenprozess. Sehen Sie sich das einzige Beispiel an, das ich im Internet finden kann: Erstellen Sie einen gemeinsamen Thread, um Anweisungen zu empfangen, die von verschiedenen Verbindungen gesendet werden, und implementieren Sie dann Ihre eigene Befehlsverarbeitungslogik. Nachdem die Befehlsverarbeitung abgeschlossen ist, werden die Ergebnisse an die einzelnen Verbindungen zurückgegeben Verbindungsbenutzer.
HTML-Code:

Code kopieren

Der Code lautet wie folgt:

<script> <br>var worker = new SharedWorker('sharedworker.js'); <br>var log = document.getElementById('response_from_worker'); <br>worker.port.addEventListener('message', function(e) { <br>//Protokollieren Sie die Antwortdaten auf der Webseite <br>log.textContent =e.data; <br>}, false); <br>worker.port.start(); <br>worker.port.postMessage('ping von der Benutzer-Webseite..'); <br>//folgende Methode sendet Benutzereingaben an sharedworker <br>Funktion postMessageToSharedWorker(input) <br>{ <br>//definiere ein JSON-Objekt, um die Anfrage zu erstellen <br>var Instructions={instruction:input.value }; <br>worker.port.postMessage(instructions); <br>} <br></script>

Beispiel für einen Shared Worker: So verwenden Sie einen Shared Worker in HTML5

Anweisungen an Shared Worker senden:

脚本文件代码:

复制代码

代码如下:

// 创建一个共享线程用于接收从不同连接发送过来的指令,指令处理完成后将结果返回到各个不同的连接用户.
var connect_number = 0;
onconnect = function(e) {
connect_number =connect_number 1;
//den ersten Port hier abrufen
var port = e.ports[0];
port.postMessage('Eine neue Verbindung! Die aktuelle Verbindungsnummer ist '
connect_number);
port.onmessage = function(e) {
//Anweisungen vom Anforderer abrufen
var inventory=e.data.instruction;
var results=execute_instruction(instruction);
port.postMessage('Anfrage: ' Anweisung ' Antwort ' Ergebnisse
' von geteiltem Worker...');
};
};
/*
* Diese Funktion wird verwendet, um die vom Anforderer gesendeten Anweisungen auszuführen
* @param-Anweisung
* @return
*/
Funktion „execute_instruction(instruction)“
{
var result_value;
//implementieren Sie hier Ihre Logik
//führen Sie die Anweisung aus...
return result_value；
}

Im obigen Beispiel für einen gemeinsamen Thread wird auf der Hauptseite, also auf jeder Benutzerverbindungsseite, ein gemeinsames Thread-Objekt erstellt und anschließend eine Methode postMessageToSharedWorker definiert, um Benutzeranweisungen an den gemeinsam genutzten Thread zu senden. Gleichzeitig wird connect_number im Codeausschnitt der Shared-Thread-Implementierung definiert, um die Gesamtzahl der Verbindungen zu diesem Shared-Thread aufzuzeichnen. Verwenden Sie anschließend den Ereignishandler onconnect, um Verbindungen von verschiedenen Benutzern zu akzeptieren und die von ihnen übergebenen Anweisungen zu analysieren. Schließlich wird eine Methode „execute_instruction“ definiert, um die Anweisungen des Benutzers auszuführen. Nachdem die Anweisung ausgeführt wurde, werden die Ergebnisse an jeden Benutzer zurückgegeben.

Hier verwenden wir nicht wie im vorherigen Beispiel den onmessage-Event-Handler des Worker-Threads, sondern eine andere Methode addEventListener. Tatsächlich sind die Implementierungsprinzipien der beiden, wie bereits erwähnt, grundsätzlich gleich, es gibt jedoch einige geringfügige Unterschiede. Wenn addEventListener zum Akzeptieren von Nachrichten von gemeinsam genutzten Threads verwendet wird, muss die Methode worker.port.start() verwendet werden Zuerst müssen Sie diesen Port aktivieren. Danach können Sie wie in einem Worker-Thread ganz normal Nachrichten empfangen und senden.
Abschlusserklärung
Dinge, die im Thread erledigt werden können:
1. Sie können setTimeout(), clearTimeout(), setInterval(), clearInterval verwenden () usw. Funktion.
2. Kann ein Navigatorobjekt verwenden.
3. Kann XMLHttpRequest zum Senden von Anfragen verwenden.
4. Web Storage kann in Threads verwendet werden.
5. Sie können self in einem Thread verwenden, um den Umfang dieses Threads zu erhalten.
Dinge, die nicht in Threads ausgeführt werden können:
1. Andere DOM/BOM-Objekte als Navigator können nicht in Threads verwendet werden, z. B. Fenster und Dokumente (wenn Sie dies tun möchten, können Sie dies nur tun). Senden von Nachrichten an den Worker-Ersteller, Bedienung über Callback-Funktion).
2. Variablen und Funktionen im Hauptthread können nicht in Threads verwendet werden.
3. Betriebsbefehle mit „Suspendierungs“-Effekten, wie z. B. Warnung usw., können nicht in Threads verwendet werden.
4. JS kann nicht domänenübergreifend in einem Thread geladen werden.
Threads verbrauchen auch Ressourcen, und die Verwendung von Threads bringt auch eine gewisse Komplexität mit sich. Wenn es also keinen guten Grund für die Verwendung zusätzlicher Threads gibt, sollten Sie diese nicht verwenden.
Praktische Referenz
Offizielle Dokumentation: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
WebWorker-Klassifizierungsbeschreibung: http://www.w3schools.com/html5/html5_webworkers.asp
Script House: http://www.jb51.net/w3school/html5/
WebWorker-Übersicht: https://developer.mozilla.org/en/Using_web_workers

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in SVG 2D in HTML5 3 – Einführung in Text, Bilder und Rendering text_html5 Tutorial-FähigkeitenNächster Artikel：Einführung in SVG 2D in HTML5 3 – Einführung in Text, Bilder und Rendering text_html5 Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen

• Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
• Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
• Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
• Reguläre Ausdrücke und neue HTML5-Elemente
• So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen