Alles, was Sie über Web Worker wissen müssen, um loszulegen.

Vor kurzem habe ich an Web-Workern herumgebastelt und dies ist eine umfassende Anleitung zu allem, was Sie wissen müssen, um mit der Verwendung von Web-Workern zu beginnen.

Wenn Sie das Lesen des Blogs überspringen und sich stattdessen den Code ansehen möchten, finden Sie hier das Github-Repository, das alle Snippets enthält.

Github Web Worker Repository

 

Inhaltsverzeichnis

• Häufige Missverständnisse
• Grundlegende Einrichtung von Web Workers
  • Web Worker-Setup mit nativem JavaScript
  • Web Workers-Setup mit Comlink
• Wie kann ich überprüfen, ob mein Arbeitnehmer ordnungsgemäß registriert wurde?
• Weiterführende Literatur

 
 

Häufige Missverständnisse

Was mich also dazu brachte, mich mit Web Workern zu beschäftigen, war, dass auf einer Plattform, die ich erstellte, eine rechenintensive Aufgabe darin bestand, die Benutzeroberfläche zu blockieren.
Also dachte ich: „Huh, okay, wie kann ich dafür sorgen, dass die Benutzeroberfläche dadurch nicht blockiert wird?“ Soll ich setTimeout verwenden, um sicherzustellen, dass die Ausführung des gesamten Codes im Hauptthread abgeschlossen ist, wonach die rechenintensive Aufgabe ausgeführt werden kann?

Hier liegt also das Missverständnis: Die Verwendung von setTimeout bedeutet nicht, dass die Benutzeroberfläche nicht blockiert wird. Ja, alles im Hauptthread wird ausgeführt, bevor der setTimeout-Rückruf ausgeführt wird. Dieser Rückruf wird jedoch im Hauptthread selbst ausgeführt, wenn er aus der Makroaufgabenwarteschlange entfernt wird, wodurch die Benutzeroberfläche nicht mehr reagiert.

Um mehr über die Arbeit von setTimeout zu erfahren, finden Sie hier einige Referenzen –

• Asynchrone JavaScript- und Ereignisschleife von Grund auf – Akshay Saini
• Ereignisschleife, Web-APIs, Aufgabenwarteschlange – Lydia Hallie

 
 

Grundlegende Einrichtung von Web Workers

JavaScript ist von Natur aus eine „Single-Threaded-Sprache“, aber Web-Worker ermöglichen es uns, rechenintensiven Code in einem separaten Thread auszuführen.

Bevor wir beginnen, sind hier einige Dinge zu beachten –

• Web Worker können nicht mit dem DOM interagieren
• Der Web-Worker-Bereich ist „Selbst“ und nicht „Fenster“.
• Arbeiter sind relativ schwer und sollten nicht in großen Mengen eingesetzt werden. Beispielsweise wäre es unangemessen, für jedes Pixel eines 4-Megapixel-Bildes einen Worker zu starten. [Ref – HTML-Spezifikation]
• Außerdem geht es einem Web-Worker nicht darum, dafür zu sorgen, dass etwas 2 Sekunden statt 4 Sekunden dauert, sondern dass das DOM 0 Sekunden lang einfriert. [Ref – Web Worker sind langsam und das ist in Ordnung – Calvin Metcalf]
• Worker können wiederum neue Worker erzeugen, sofern diese Worker im selben Ursprung wie die übergeordnete Seite gehostet werden. [Ref – MDN]

 

Web Worker mit nativem JavaScript

1. Erstellen Sie eine neue JavaScript-Datei, die den Code enthält, den Sie im Arbeitsthread ausführen möchten. (sagen wir worker.js)
2. Instanziieren Sie im Hauptskript den Worker -

const worker = new Worker("./worker.js")

Hinweis: worker.js ist kein Modul und kann keine Importanweisungen verwenden. noch. :')

Um worker.js als Modul zu verwenden, geben Sie type: module in der Option des Konstruktors an.

const worker = new Worker("./worker.js")

1. Daten werden über ein Nachrichtensystem zwischen den Mitarbeitern gesendet – beide Seiten senden ihre Nachrichten mit der Methode „postMessage()“ und antworten auf Nachrichten über den Ereignishandler „onmessage“
2. Um komplexe Objekte mit zyklischen Referenzen in postMessage() zu übergeben, verwenden Sie die structureClone-Methode.
3. Um einen Web-Worker zu beenden, verwenden Sie die Terminate-Methode der Worker-API. Dies bietet dem Arbeitnehmer keine Möglichkeit, seine laufenden Tätigkeiten zu beenden; es wird sofort gestoppt.

const worker = new Worker('./worker.js', { type: 'module' })

 
Alles zusammenfügen

Sehen wir uns nun an, wie unser Code nach der Integration von Web-Workern aussieht.

Haupt-Thread-Code:

worker.terminate() 

Worker-Thread-Code:

// ...
function workerFunction() {
  // Don't spin up a new worker instance if the process has already been started.
  if (statusElement.textContent !== PROCESS_STATUS.PROCESSING && window.Worker) {
    const worker = new Worker('./worker.js', {
      type: 'module'
    })

    // Sending 10000000000000 to the web worker
    worker.postMessage(10000000000000)

    statusElement.textContent = PROCESS_STATUS.PROCESSING

    // This piece of code is executed after worker finishes its task and returns data. 
    worker.onmessage = function (event) {
      statusElement.textContent = event.data
    }
  }
}
// ...

Und das Ergebnis:

Wenn wir die Anwendung ausführen, werden Sie feststellen, dass die rechenintensive Aufgabe ausgeführt wird, ohne die Benutzeroberfläche zu blockieren.

 

Web Worker-Setup mit Comlink

Comlink ist eine winzige Bibliothek (1,1 kB), sie beseitigt die mentale Hürde, über die PostMessage-Logik nachzudenken.

Auf einer abstrakteren Ebene handelt es sich um eine RPC-Implementierung für PostMessage- und ES6-Proxys.

Ein konkreter Grund, warum ich Comlink verwendet habe, war, dass ich mit einfachem JavaScript keine Funktionen vom Hauptthread an den Worker übergeben konnte. Mithilfe des Comlink-Proxys konnte ich problemlos eine Rückruffunktion vom Hauptthread an den Worker übergeben. [Siehe diesen Abschnitt]

Um mit der Verwendung von Comlink in Ihrem Projekt zu beginnen, installieren Sie die Bibliothek

const worker = new Worker("./worker.js")

Um mit dieser Bibliothek beginnen zu können, müssen wir die folgenden Methoden kennen -

Comlink.wrap(endpoint)

• Es umschließt das exponierte Objekt des Workers und gibt einen Proxy zurück, mit dem Sie interagieren können, als wäre es ein lokales Objekt.
• Der Proxy verfügt über alle Eigenschaften und Funktionen des bereitgestellten Werts, Zugriffe und Aufrufe erfolgen jedoch grundsätzlich asynchron. Das heißt, wenn eine Funktion eine Zahl zurückgibt, gibt sie jetzt ein Versprechen für die Zahl zurück.

const worker = new Worker('./worker.js', { type: 'module' })

Comlink.expose(Wert, Endpunkt?, erlaubte Ursprünge?)

• Die Exposure-Funktion stellt einen Wert von einem Thread dem anderen zur Verfügung (d. h. ein Objekt vom Worker wird dem Hauptthread zugänglich gemacht).

worker.terminate() 

 

Wie kann ich überprüfen, ob mein Arbeitnehmer ordnungsgemäß registriert wurde?

• Um zu überprüfen, ob die Worker-Datei im Webbrowser registriert wurde (ich verwende Chrome)
• Klicken Sie mit der rechten Maustaste → Inspizieren und gehen Sie zum Quellenfenster, wo Sie die Worker-Datei finden.
• Nach dem Beenden sollte die Worker-Datei im Quellenfenster nicht sichtbar sein
• Falls Sie die Arbeitnehmerdatei nach der Kündigung des Arbeitnehmers immer noch sehen können, besteht die Möglichkeit, dass Sie mehrere Arbeitnehmer registriert haben und nicht alle von ihnen gekündigt wurden.

 

Weiterführende Literatur

• Transfer-Handler und Ereignis-Listener
• Geteilter Arbeiter
• Übertragbare Gegenstände

Das obige ist der detaillierte Inhalt vonAlles, was Sie über Web Worker wissen müssen, um loszulegen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!