Detaillierte Erläuterung der Multi-Thread-Entwicklung und Verwendung von H5+WebWorkers

Dieses Mal werde ich Ihnen die Verwendung der H5+WebWorkers-Multithread-Entwicklung ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die H5+WebWorkers-Multithread-Entwicklung? ein Blick.

Wir alle wissen, dass der Browser js-Code in einem einzelnen Thread ausführt. Wenn der Seitenschritt ausgeführt wird, kann dies alles durch die hier vorgestellten WebWorker geändert werden.

WebWorker sind JS-Codes, die unabhängig von anderen Skripten im Hintergrund ausgeführt werden und die Leistung der Seite nicht beeinträchtigen. Wir können weiterhin tun, was wir wollen: klicken, Inhalte auswählen usw., während die WebWorker im Hintergrund laufen.

Web Worker werden in allen gängigen Browsern außer Internet Explorer unterstützt.

Schritt eins: Arbeitskräfte generieren.

Rufen Sie den Worker()-Konstruktor auf und geben Sie den URI eines Skripts an, das im Worker-Thread ausgeführt werden soll. Die aktuelle Seite gibt beispielsweise an, dass das Skript ausgeführt wurde vom Worker-Thread ist script -worker.js.

var myWorker = new Worker("script-worker.js");

In script-worker.js können wir zusätzlichen Code ausführen. Die Ausführung dieser Codes hat keine Auswirkungen auf die Seite, um andere Dinge zu tun, was großartig klingt.

Schritt 2: Übergeben Sie die Daten.

Die Seite kann mit dem Arbeiter interagieren, um Daten zu übertragen, sodass der Arbeiter stillschweigend rechnen kann, ohne die Seite zu beeinträchtigen, um sinnvolle Dinge zu tun. Dann weisen Sie die Seite an, die Daten zu verwenden.

//[主页面代码]
myWorker.postMessage("data-from-mainpage");
//[worker代码]
onmessage = function (oEvent) {
    console.log("主页面发送过来的数据是："+oEvent.data));    
};

Das Obige ist die Situation, in der [die Hauptseite Daten an das Worker-Skript sendet], ja, Sie haben den sehr freundlichen Beitrag gesehenNachricht, okay, das Ding gefällt mir.

 //[主页面代码]
 myWorker.onmessage = function (oEvent) {
     console.log("worker脚本发送过来的数据是："+oEvent.data)); 
 }; 
//[worker代码]
postMessage("data-from-mainpage");

Das Obige ist die Situation, in der ein Worker-Skript Daten an die Hauptseite sendet. Der Schlüssel liegt darin, dass eine clevere Verwendung von Vorteil ist.

Darüber hinaus kann es zu Fehlern bei der Worker-Ausführung kommen. Die Hauptseite kann Worker-Fehler überwachen durch:

myWorker.onerror=function(oEvent){};

.

Schritt 3: Wichtige Punkte.

Der Worker-Thread kann Aufgaben ausführen, ohne die Benutzeroberfläche zu beeinträchtigen. Der ausgeführte JavaScript-Code befindet sich vollständig in einem anderen Bereich und unterscheidet sich vom Code auf der aktuellen Webseite . Gemeinsamer Geltungsbereich.

Die Methode importScripts() wird im globalen Bereich von Worker bereitgestellt, der eine oder mehrere URLs empfängt, die auf JavaScript-Dateien verweisen. Der Ladevorgang wird asynchron durchgeführt.

importScripts() wird nur wirksam, wenn Sie einen absoluten URI angeben, und der Ausführungsprozess ist ebenfalls asynchron.

Wenn wir das WebWorkers-Objekt erstellen, wartet es weiterhin auf Nachrichten (auch nachdem das externe Skript abgeschlossen ist), bis es beendet wird. Verwenden Sie die Methode myWorker.terminate(), um die WebWorkers zu beenden und den Browser freizugeben /Computerressourcen.

Schritt 4: Wichtige Einschränkungen.

1. Auf DOM-Knoten kann nicht zugegriffen werden, auf globale Variablen oder globale Funktion kann nicht zugegriffen werden, alarm() kann nicht aufgerufen oder bestätigt werden usw. Funktionen und Auf globale Browservariablen wie window und document kann nicht zugegriffen werden.

2 Sie können jedoch weiterhin Funktionen wie setTimeout() und setInterval() verwenden das XMLHttpRequest-Objekt für die Ajax-Kommunikation.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte des Webpack-Packens und der Komprimierung von js und css

jquery fullpage plug -in, um Header und Tail hinzuzufügen, urheberrechtlich relevant

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Multi-Thread-Entwicklung und Verwendung von H5+WebWorkers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!