Eine Einführung in die JavaScript-API von Web Workers

Web Workers ist eine JavaScript-API, die es Ihnen ermöglicht Führen Sie die Skripts in einem separaten Thread aus. Dies kann sich als nützlich erweisen, wenn Sie die Ausführung der Hauptscripts aufgrund von Hintergrund-ähnlichen Skripts nicht behindern möchten.

Die Web Workers API ist wird in fast allen Browsern unterstützt, Weitere Informationen finden Sie in den CanIUse-Dokumenten. Bevor wir uns mit dem Code beschäftigen, wollen wir uns einige Szenarien ansehen, in denen Sie diese API verwenden möchten, um eine Vorstellung davon zu bekommen, was ich damit meinte Hintergrund-ähnliche Skripte.

Anwendungsfälle

Nehmen wir an, es gibt ein Skript holt und verarbeitet eine Datei. Wenn eine Datei ist wesentlich groß wird es lange dauern, bis es verarbeitet wird! Dies könnte dazu führen, dass andere Skripts, die später aufgerufen wurden, nicht ausgeführt werden.

Wenn jedoch die Die Dateiverarbeitung wird in einen Hintergrundthread verschoben, bekannt als Arbeiter-Thread, Andere Ereignisse werden nicht blockiert, bis das vorherige beendet ist.

Das Skript in einem Hintergrund-Worker-Thread ausgeführt ist bekannt als Arbeiterskript oder nur die Arbeitnehmer.

Stellen Sie sich für ein anderes Beispiel vor: großes Formular, in Registerkarten angeordnet. Es ist so geschrieben, dass die Steuerelemente auf einer Registerkarte aktualisiert werden wirkt sich auf einige der Steuerelemente in anderen aus.

Wenn die Aktualisierung der anderen Registerkarten einige Zeit in Anspruch nimmt, kann der Benutzer dies tun Die aktuelle Registerkarte kann nicht kontinuierlich verwendet werden ohne dass seine Ereignisse auf Eis gelegt werden. Dies kann die Benutzeroberfläche einfrieren, um die Bestürzung des Benutzers zu beeinträchtigen.

Da ein Benutzer die anderen Registerkarten beim Ausfüllen einer aktuellen Registerkarte nicht sehen kann, können Sie dies tun Aktualisieren Sie die Steuerelemente der anderen Registerkarten in einem Hintergrundthread. Auf diese Weise kann der Benutzer die aktuelle Registerkarte, die er ausfüllt, weiterhin verwenden, ohne dass seine Skripts durch den Aktualisierungsprozess der Steuerelemente in anderen Registerkarten blockiert werden.

Ebenso, wenn Sie in einem Szenario ein Skript finden kann einen Benutzer daran hindern, die Benutzeroberfläche zu verwenden Bevor die Ausführung abgeschlossen ist, sollten Sie sie möglicherweise in einen Arbeitsthread verschieben, sodass sie im Hintergrund ausgeführt werden kann.

Anwendungsbereiche und Arten von Arbeitnehmern

Die Web Workers-API ist wahrscheinlich eine der einfachsten APIs, mit der gearbeitet werden kann. Es hat ziemlich einfache Methoden zu Arbeitsthreads erstellen und mit ihnen über das Hauptskript kommunizieren.

Der globale Bereich eines Arbeitsthreads befindet sich in einem anderen Kontext als der Hauptthread. Sie kann nicht auf die Methoden und Eigenschaften von zugreifen Fenster Objekt sowie warnen() in einem Arbeitsthread. Du auch Das DOM kann nicht direkt geändert werden von einem Arbeitsthread.

Aber du können Verwenden Sie viele APIs, die unter fallen Fenster, zum Beispiel Versprechen und Holen, in Ihrem Arbeitsthread (siehe vollständige Liste).

Du kannst auch haben verschachtelte Arbeitsthreads: Arbeitsthreads, die aus einem anderen Arbeitsthread erstellt wurden. Ein Arbeiter, der von einem anderen erstellt wurde, heißt a Unterarbeiter.

Es gibt auch viele Typen von Arbeitern. Die zwei wichtigsten sind engagierte und geteilte Arbeiter.

Engagierte Arbeiter gehören zu demselben Browserkontext dass ihr Hauptfaden gehört. Geteilte Arbeiter sind jedoch in einem anderen Browserkontext vorhanden sein (z. B. in einem iframe) aus dem Hauptskript. In beiden Fällen das Hauptskript und die Arbeiter müssen in derselben Domäne sein.

Das Beispiel in diesem Tutorial wird sein über engagierte Arbeiter, Welches ist der häufigste Typ.

API-Methoden

Siehe das folgende Diagramm für eine Schneller Überblick über alle Hauptmethoden das bilden die Web Workers API.

Das Arbeitnehmer() Konstrukteur erstellt einen dedizierten Worker-Thread und gibt sein Referenzobjekt zurück. Dann verwenden wir dieses Objekt, um mit diesem bestimmten Mitarbeiter zu kommunizieren.

Das POST-Meldung() Diese Methode wird sowohl in den Haupt- als auch in den Arbeiterskripten verwendet Daten miteinander senden. Die gesendeten Daten werden dann auf der anderen Seite vom empfangen eine Nachricht Eventhandler.

Das kündigen() Methode beendet einen Arbeitsthread aus dem Hauptskript. Diese Kündigung ist sofortig: Alle aktuellen Skriptausführungen und ausstehenden Skripts werden abgebrochen. Das schließen() Methode macht das gleiche, aber es ist wird vom Arbeiter-Thread aufgerufen, der sich selbst schließt.

Beispielcode

Nun sehen wir uns einen Beispielcode an. Das index.html Seite enthält die Hauptskript in einem

Wir beginnen mit dem Erstellung des Worker-Threads aus dem Hauptskript.

  w = neuer Arbeiter ('worker.js'); 
 Das Arbeitnehmer() Konstrukteur verwendet die URL der Worker-Datei als Argument.
 Dann fügen wir einen Event-Handler für die hinzu eine Nachricht Ereignis der neu erstellten Worker-Instanz auf Daten von ihm erhalten. Das Daten Eigentum der e Ereignis enthält die empfangenen Daten.
  w = neuer Arbeiter ('worker.js'); w.onmessage = (e) => console.log ('Vom Worker erhalten: $ e.data');  
 Jetzt benutzen wir POST-Meldung() zu Senden Sie einige Daten an den Arbeitsthread auf Knopfdruck. Das POST-Meldung() Methode kann zwei Argumente annehmen. Der erste kann einen beliebigen Typ haben (String, Array…). Es sind die Daten an den Arbeitsthread gesendet werden (oder zum Hauptskript, wenn die Methode im Arbeitsthread vorhanden ist).
 Der zweite, optionale Parameter ist ein Array von Objekten kann von den Arbeitsthreads verwendet werden (aber nicht durch das Hauptskript oder umgekehrt). Diese Arten von Objekten werden aufgerufen Übertragbar Objekte.
  document.querySelector ('button'). onclick = () => w.postMessage ('john');  
 Ich sende nur einen Zeichenfolgewert an den Arbeitsthread.
 Im Arbeitsthread müssen wir eine hinzufügen eine Nachricht Eventhandler das erhält die Daten Wird vom Hauptskript beim Klicken auf die Schaltfläche gesendet. Im Handler sind wir verketten Sie die empfangene Zeichenfolge mit einer anderen und senden Sie das Ergebnis an das Hauptskript zurück.
  console.info ("Arbeiter erstellt"); onmessage = (e) => postMessage ('Hi $ e.data');  
 Anders als im Hauptskript, wo wir das verwenden mussten w Referenzobjekt an beziehen sich auf den jeweiligen Arbeitsthread worauf das Skript dann die verwendet eine Nachricht und POST-Meldung Methoden gibt es Es ist kein Referenzobjekt im Arbeitsthread erforderlich auf den Haupt-Thread zeigen.
 Der Code funktioniert wie folgt. Wenn der Browser geladen wird index.html, Die Konsole zeigt die "Arbeiter geschaffen" Nachricht sobald der Arbeitnehmer() Der Konstruktor wird im Hauptthread ausgeführt, einen neuen arbeiter schaffen.
 Wenn Sie auf die Schaltfläche auf der Seite klicken, erhalten Sie die "Vom Arbeiter erhalten: Hallo john" Nachricht in der Konsole, die die Zeichenfolge war, die war verkettet im Worker-Thread mit den Daten gesendet, und dann wurde zurück zum Hauptskript geschickt.