So implementieren Sie Web Worker in H5-Multithreading-HTML-Tutorial-php.cn

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..  
}

Nach dem Login kopieren

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);
}

Nach dem Login kopieren

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

Neueste Artikel des Autors

Einführung in die neueste Version der PHP Programmer Toolbox v1.0

2018-06-11 11:57:34
So gehen Sie mit einem Routing-Fehler von vue.js um

2018-06-15 15:55:18
So verwenden Sie js zum Parsen der Datenbank (mit Code)

2018-06-15 15:49:00
So verwenden Sie js, um DOM-Ereignisse im Projekt zu binden

2018-06-15 15:46:15
So bedienen Sie JS-Strings und Sonderzeichen

2018-06-15 15:42:38
So verwenden Sie die einzelnen Methoden in jQuery in einem Projekt

2018-06-15 15:40:34
So verwenden Sie JQuery zum Hochladen von Dateien

2018-06-15 15:39:32
So verwenden Sie den JS-Prototyp und die Prototypenkette

2018-06-15 15:37:14
Angular CLI+Angular 5 praktische Projektdemonstration

2018-06-15 15:34:21
Knotenelemente mit jQuery ersetzen (Code im Anhang)

2018-06-15 15:22:51

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2308

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2437

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

2057

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

1941

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

2006

verwandte Themen

Mehr>