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

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.

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