Web Worker: eine Möglichkeit, Skripte im Hintergrund in einem anderen Thread als dem aktuellen Hauptthread (Fenster) auszuführen.

1. Web-Worker vs. asynchron mit event_loop
2. Einführung in Web Worker
3. So erstellen Sie einen Web-Worker
4. Zum Beispiel mit einem Web-Worker
5. Einschränkung von Web Workern
6. asynchroner Vorgang in Web Workern

1. Web Worker im Vergleich zu asynchronen Vorgängen mit Ereignisschleife

JavaScript verarbeitet normalerweise asynchrone Vorgänge, indem es Aufgaben in entsprechende Warteschlangen stellt (Makro-Aufgaben-Warteschlange, Mikro-Aufgaben-Warteschlange), wobei die Ereignisschleife diese Warteschlangen kontinuierlich überprüft und Aufgaben in den Aufrufstapel schiebt, wenn sie zur Ausführung bereit sind. Dieser Ansatz gewährleistet eine nicht blockierende Ausführung, führt aber dennoch alles in einem einzigen Thread aus.

Web Worker hingegen ermöglichen die Ausführung von Skripten in einem völlig separaten Thread mit eigenem Aufrufstapel, asynchronen Warteschlangen und Ereignisschleife. Diese Trennung verhindert, dass der Hauptthread durch schwere Berechnungen oder lang laufende Aufgaben blockiert wird, da der Worker unabhängig arbeitet.

2. Einführung in Web Worker

Web-Worker führen Skripte in einem anderen Kontext als dem Hauptfensterkontext aus und ermöglichen so Parallelität in Webanwendungen. Die Web Worker API bietet verschiedene Arten von Workern:

• Dedizierte Mitarbeiter: Diese werden von einem einzigen Skript genutzt und eignen sich ideal zum Auslagern von Aufgaben aus dem Hauptthread.
• Gemeinsam genutzte Worker: Zugriff durch mehrere Skripte, die in unterschiedlichen Kontexten ausgeführt werden (z. B. verschiedene Fenster oder Iframes).
• Servicemitarbeiter: Fungieren als Proxyserver zwischen Webanwendungen, dem Browser und dem Netzwerk und stellen Funktionen wie Offline-Unterstützung und Caching bereit.

Dieser Artikel konzentriert sich auf engagierte Worker, die am einfachsten zu implementieren sind und am häufigsten verwendet werden.

3. So erstellen Sie einen Web Worker

Um einen Web-Worker zu erstellen, können Sie die folgenden Schlüsselmethoden verwenden:

• new Worker(): Der Konstruktor zum Erstellen eines neuen Workers.
• postMessage(): Sendet Nachrichten vom Hauptthread an den Worker oder umgekehrt.
• onmessage: Eine Rückruffunktion zur Verarbeitung von Nachrichten, die vom Worker empfangen werden.
• terminate(): Stoppt den Worker sofort.

4. Einfaches Beispiel

Lassen Sie uns einen Worker erstellen, um Daten von einer API abzurufen, insbesondere Hundebilder von der Dog CEO API.

4.1 Arbeitnehmerkodex

Hier ist die Implementierung des Worker-Skripts. Beachten Sie, dass self innerhalb des Workers verwendet wird, um auf den globalen Kontext zu verweisen:

if (window.Worker) {
    const worker = new Worker("/src/worker.js");
        worker.postMessage({ 
            operation: "get_dog_imgs",
            url: "https://dog.ceo/api/breeds/image/random", 
            count: 5   //number of photos
        });
        worker.onmessage = (e) => {
        console.log(e.data);
        if (e && e.data) {
            setdata((old) => [...old, e.data]); // update react state
            showCallStack(); // function to show the callstack 
        }
    };
    worker.onerror = (e) => {
        console.log(e);
    };
}

In diesem Code lauscht der Worker auf Nachrichten (onmessage) und ruft Daten von der angegebenen URL mehrmals ab, wie durch die Anzahl angegeben.

So sieht der Aufrufstapel im Worker aus:

4.2 Kundencode

Der Hauptthread verwendet den Worker wie folgt:

self.onmessage = (event) => {
    const data = event.data;
    if (data && data.url && data.count) {
        fetchFromUrls(data.url, data.count);
    }
}
// fetch single data 
const fetchdata = async (url) => {
    const res = await self.fetch(url);
    return await res.json();
};

const fetchFromUrls = async (url, count) => {
    showCallStack(); // showing the callstack of the worker 
    for (const i of new Array(count).fill(0)) {
        let data = await fetchdata(url);
        if (data && data.message) {
            self.postMessage({ type: "img", data: data.message });
        }
    }
};

Dieser Code zeigt, wie man eine Nachricht an den Worker sendet und die abgerufenen Daten im Hauptthread empfängt.

Für den vollständigen Code gehen Sie zu Code

5. Einschränkungen von Web Workern

Während Web-Worker in einem separaten Thread vom Hauptfenster-Thread ausgeführt werden, unterliegen sie bestimmten Einschränkungen:

• Kein Zugriff auf DOM: Arbeiter können das DOM nicht direkt manipulieren. Zur Aktualisierung der Benutzeroberfläche ist eine Kommunikation mit dem Hauptthread erforderlich.
• Ressourcenverbrauch: Eine übermäßige Nutzung von Web-Workern kann zu einer hohen Speichernutzung führen, da jeder Worker zusätzliche Ressourcen benötigt, um unabhängig zu arbeiten.