So implementieren Sie Web Worker in H5-Multithreading

Viele Leute haben mich gefragt, wie man Web Worker in H5-Multithreading implementiert? Wenn wir über diese Frage sprechen, müssen Sie zunächst wissen, was ein Web Worker ist. Deshalb werden wir diese Frage heute für Sie beantworten.

Wenn der JavaScript-Code an den Web Worker zur Ausführung im Hintergrund übergeben wird, kann die Seite weiterhin auf Benutzervorgänge reagieren, während JavaScript ausgeführt wird, um zu verhindern, dass die Seite hängen bleibt. Benutzer können mehrere Worker-Threads erstellen, um kleine verteilte Berechnungen und andere Aufgaben im Vordergrund auszuführen.

Verteiltes Rechnen ist eine Rechenmethode, die im Gegensatz zum zentralisierten Rechnen steht. Mit der Entwicklung der Rechenbasis erfordern einige Anwendungen eine sehr große Rechenleistung. Wenn zentralisierte Datenverarbeitung verwendet wird, wird die Fertigstellung lange dauern. Beim verteilten Rechnen wird die Anwendung in viele kleine Teile zerlegt und diese mehreren Computern zur Verarbeitung zugewiesen. Dadurch kann insgesamt Rechenzeit eingespart und die Recheneffizienz erheblich verbessert werden.

Das oben erwähnte kleine verteilte Rechnen ist eine effiziente Nutzung von CPU-Mehrkernen.

Dinge, die in Threads nicht erledigt werden können:

Web Worker kann nicht auf DOM-Knoten zugreifen Es ist normal, dass DOM nicht geteilt werden kann, sonst wird das DOM hier und da manipuliert Der Arbeiter manipuliert auch das DOM oder löscht es sogar. Ist das nicht ein Konflikt? Web Worker kann nicht auf globale Variablen oder globale Funktionen zugreifen. Web Worker kann nicht auf globale Browservariablen wie window und document

Dinge, die im Thread erledigt werden können:

kann setTimeout(), clearTimeout(), setInterval(), clearInterval() und andere Funktionen verwenden. Kann

Navigatorobjekt verwenden XMLHttpRequest. Um eine Anfrage zu senden, können Sie Web Storage verwenden und self verwenden, um den Umfang dieses Threads abzurufen

Web Worker kann in zwei Typen unterteilt werden: dedizierter Thread (dedizierter Web Worker) und gemeinsam genutzter Thread ( gemeinsam genutzter Web-Worker). Auf einen dedizierten Thread kann nur von der Seite zugegriffen werden, die ihn erstellt hat, und er endet, wenn die aktuelle Seite geschlossen wird; auf einen gemeinsamen Thread können mehrere Seiten zugreifen und er endet erst, wenn alle zugehörigen Seiten geschlossen werden. Im Vergleich zu dedizierten Threads sind gemeinsam genutzte Threads etwas komplizierter.

Browserunterstützung für Web Worker erkennen

if(typeof(Worker)!=="undefined")  {  
    // Yes! Web worker support!  
}  else  {  
    // Sorry! No Web Worker support..  
}

Web Worker-Objekte und -Dateien erstellen:

Das Folgende ist wahrscheinlich die einfachste JS-Multithread-Demo für Einsteiger:

Bildbeschreibung hier schreiben

Thread erstellen

var worker = new Worker(url);//url ist der JavaScript-Dateiname und der entsprechende Pfad, der im ausgeführt werden muss Thread

Thread-Kommunikation

Die Kommunikation zwischen dem Haupt-Thread und den untergeordneten Threads verwendet die Methoden postMessage und onmessage des Thread-Objekts. Unabhängig davon, wer Daten an wen sendet, verwendet der Absender die Methode postMessage und der Empfänger die Methode onmessage, um Daten zu empfangen. Sowohl postMessage als auch onmessage haben nur einen Parameter. Unter der Annahme, dass der Parameter von onmessage event ist, werden die empfangenen Daten über event.data abgerufen.

Zerstören Sie den Thread

Verwenden Sie außerhalb des Threads die Terminate-Methode der Thread-Instanz, um den Thread zu zerstören. Verwenden Sie innerhalb des Threads die Close-Methode, der Thread zerstört sich selbst

Fehlerbehandlung

Wenn in einem Thread ein Fehler auftritt, wird dessen Onerror-Ereignisrückruf aufgerufen.

var worker = new Worker("test.js");
worker.onerror = function(event){
    console.log("load web worker error." + event);
}

JSON-Daten senden

Komplexe Daten in JSON senden!

Verwenden Sie importScripts in Web Worker, um externe JS-Dateien zu laden

Verwenden Sie auf der HTML-Seite das Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a

, um externe JS-Dateien zu laden, und das Tag

Seien Sie vorsichtig bei Web Workern!

Beim Instanziieren von Worker müssen Sie die URL eines Skripts übergeben, und diese URL muss sich in dieser Domäne befinden, andernfalls wird ein domänenübergreifender Fehler gemeldet! var worker = new Worker('

https://localhost/worker.js');

Aber Sie können Skripte in jeder Domäne über die importScripts-Methode in worker.js einführen, genau wie HTML Dasselbe wie das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag. Im Folgenden sind die legalen Verwendungsmethoden aufgeführt:

importScripts(); /* imports nothing */ importScripts(‘foo.js’); /* imports just “foo.js” */ importScripts(‘foo.js’, ‘bar.js’); /* imports two scripts */ importScripts(‘//example.com/hello.js’); /* You can import scripts from other origins */
可以利用这里的importScripts方法解决资源预加载的问题（浏览器预先加载资源，而不会对资源进行解析和执行），道理也很简单。
Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts() . This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed.
</script>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Verwandte Lektüre:

Implementierungsschritte der DOM-Programmierung in HTML5

Verwendung von h5 zur Durchführung des WeChat-Zahlungsprozesses Implementierungsschritte

Verwenden Sie H5, um ein Dropdown-Feld mit Spezialeffekten zu erstellen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Web Worker in H5-Multithreading. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!