Wondershare EdrawMind
Mindmap-Galerie Web-Worker
- 5
Web-Worker
Web Worker verstehen und verwenden sind eine Reihe von APIs, die von HTML5 bereitgestellt und standardisiert werden. Sie erstellen eine Multithread-Laufumgebung für JavaScript.
Bearbeitet um 2024-03-08 16:53:42
- Für Sie empfohlen
- Gliederung
Web-Worker
Die Geburt von Web Worker
Wie wir alle wissen, wurde js ursprünglich für die Ausführung im Browser entwickelt
Um zu verhindern, dass mehrere Threads das DOM gleichzeitig bedienen und Rendering-Konflikte verursachen, ist der js-Executor als Single-Thread ausgelegt.
Mit der Entwicklung der Front-End-Technologie werden JS-Threads bei Szenarien, die viele Berechnungen erfordern, oft für lange Zeit blockiert und verursachen sogar Seiteneinfrierungen, was sich auf die Benutzererfahrung auswirkt.
Erfahren Sie mehr über Web Worker
Was ist ein Web Worker?
Web Worker sind Teil des HTML5-Standards
Definiert eine Reihe von APIs, die es uns ermöglichen, einen neuen Worker-Thread außerhalb des Haupt-JS-Threads zu öffnen und darin ein JS-Skript auszuführen
Bietet Entwicklern die Möglichkeit, mit js Multithreads zu betreiben
Die Benutzeroberfläche der Webanwendung bleibt auch dann reaktionsfähig, wenn das Skript über einen längeren Zeitraum ausgeführt wird
Vorteile von Web Workern
Verbessern Sie die Seitenleistung: Führen Sie einige rechenintensive oder zeitaufwändige Vorgänge im Hintergrundthread durch, z. B. Datenverarbeitung, Bildverarbeitung usw., ohne den Hauptthread zu belegen, wodurch Seitenverzögerungen oder -einfrierungen vermieden und die Seitenleistung und Reaktionsfähigkeit verbessert werden .
Große Datenmengen verarbeiten: Große Datenmengen können verarbeitet werden, da sie in separaten Threads ausgeführt werden und die Ausführung des Hauptthreads nicht beeinträchtigen. Große Datenmengen können effizienter verarbeitet werden, wodurch die Effizienz und Skalierbarkeit des Codes verbessert wird.
Machen Sie den Code modularer: Der Code kann in mehrere Module unterteilt und in verschiedenen Threads ausgeführt werden, wodurch der Code modularer, wartbarer und lesbarer wird.
Unterstützt Multi-Threading: Unterstützt Multi-Threading, sodass Sie die Vorteile von Multi-Core-Prozessoren nutzen können, um die Ausführungseffizienz Ihres Codes zu verbessern.
Nutzungsszenarien für Web Worker
Bildverarbeitung: wie Drehung, Zuschneiden, Skalierung, Filter usw. Dies verbessert die Bildverarbeitungsleistung und Reaktionsfähigkeit.
Datenverarbeitung: wie Filtern, Sortieren, Zusammenfassen und Transformieren von Datensätzen usw. Dies verbessert die Effizienz und Genauigkeit der Datenverarbeitung.
Rechenintensive Aufgaben: wie Simulation, Optimierung, Vorhersage, Statistik usw. Dies verbessert die Geschwindigkeit und Genauigkeit von Rechenaufgaben.
Echtzeitkommunikation: z. B. Chatrooms, Spiele, Videokonferenzen usw. Dies verbessert die Stabilität und Leistung der Echtzeitkommunikation.
Offline-Caching: Häufig verwendete Ressourcen können vorab in den lokalen Cache des Clients heruntergeladen werden, und die Ressourcen im Cache können verwendet werden, wenn kein Zugriff auf das Internet möglich ist. Dies kann die Benutzerfreundlichkeit und Reaktionsfähigkeit Ihrer Anwendung verbessern, insbesondere auf mobilen Geräten.
Multithread-Verarbeitung: wie paralleles Rechnen, Aufgabenverteilung, Lastausgleich usw. Dies verbessert die Parallelität und Skalierbarkeit des Systems.
Web Worker-Nutzung
Erstellen Sie einen Worker: Rufen Sie einfach den Worker()-Konstruktor über new auf, der zwei Parameter erhält: const worker = new Worker(path, options);
js-Hauptthread und Arbeitsthread-Datenübertragung: Der Hauptthread und der Arbeitsthread senden beide Nachrichten über die postMessage-Methode und hören auf das Nachrichtenereignis, um Nachrichten zu empfangen
Die Datenübertragung zwischen dem Hauptthread und dem Arbeitsthread erfolgt nach Wert und nicht nach Adresse. Selbst wenn ein Objekt übergeben und direkt zurückgegeben wird, ist der empfangene Wert daher nicht der ursprüngliche Wert.
Auf Fehlermeldungen warten: Web Worker stellt zwei Ereignisse bereit, um auf Fehler zu warten
Fehler: Wird ausgelöst, wenn im Worker ein Fehler auftritt
Nachrichtenfehler: Wird ausgelöst, wenn das Nachrichtenereignis Parameter empfängt, die nicht deserialisiert werden können
Schließen Sie den Worker-Thread: Das Herunterfahren des Worker-Threads kann sowohl für den Haupt-Thread als auch für den Worker-Thread durchgeführt werden, die Auswirkungen auf den Worker-Thread sind jedoch etwas unterschiedlich.
Ähnlichkeit: Unabhängig davon, ob der Worker im Hauptthread oder im Worker-Thread heruntergefahren wird, werden die Aufgaben in der aktuellen Ereignisschleife des Worker-Threads weiterhin ausgeführt.
Der Unterschied: Wenn der Worker im Hauptthread manuell geschlossen wird, wird die Verbindung zwischen dem Hauptthread und dem Worker-Thread sofort gestoppt. Auch wenn in der aktuellen Ereignisschleife des Worker-Threads noch Aufgaben ausgeführt werden müssen, wird die PostMessage angezeigt ()-Methode wird weiterhin aufgerufen, aber der Hauptthread erhält keine Nachricht mehr. Durch das Schließen des Workers innerhalb des Worker-Threads wird dieser nicht direkt vom Haupt-Thread getrennt, sondern es wird gewartet, bis alle Aufgaben der aktuellen Ereignisschleife des Worker-Threads abgeschlossen sind, bevor dieser geschlossen wird. Mit anderen Worten: Wenn Sie in der aktuellen Ereignisschleife weiterhin die Methode postMessage() aufrufen, kann der Hauptthread weiterhin Nachrichten empfangen, indem er das Nachrichtenereignis abhört.
Der Arbeitsthread verweist auf andere JS-Dateien
Der Web-Worker stellt die Methode importScripts() im Worker-Thread bereit, um die von uns benötigten JS-Dateien zu laden. Darüber hinaus unterliegen die über diese Methode geladenen JS-Dateien nicht derselben Ursprungsrichtlinie.
ESModule-Modus: Wenn sich die js-Datei im ESModule-Modus befindet, kann importScripts() die Datei nicht importieren. In diesem Fall müssen Sie const worker = new Worker('/worker.js', {type: 'module'} verwenden. ), um den Dateityp anzugeben, und dann können Sie die Importmethode verwenden
Welche Datentypen können zwischen dem Hauptthread und den Arbeitsthreads übergeben werden?
Fehler- und Funktionsobjekte sowie Dom-Knoten können nicht übergeben werden
SharedWorker
Ist ein spezieller Worker-Typ, auf den über mehrere Browsing-Kontexte zugegriffen werden kann, z. B. über mehrere Fenster, Iframes und Worker. Diese Browsing-Kontexte müssen jedoch denselben Ursprung haben
Implementiert in einer anderen Schnittstelle als normale Worker, mit einem anderen globalen Geltungsbereich: SharedWorkerGlobalScope, aber von WorkerGlobalScope geerbt
Der Unterschied zu Workern: Der Hauptthread und der SharedWorker-Thread stellen eine Verbindung über MessagePort her, und die Datenkommunikationsmethoden werden alle auf SharedWorker.port bereitgestellt. Wenn addEventListener zum Empfangen von Nachrichtenereignissen verwendet wird, erfolgt die Initialisierung von SharedWorker () durch den Hauptthread Um den Port manuell zu öffnen, muss die SharedWorker.port.start()-Methode aufgerufen werden. Wenn jedoch die onmessage-Methode verwendet wird, wird der Port standardmäßig geöffnet und es besteht keine Notwendigkeit, die SharedWorker.port.start()-Methode manuell aufzurufen.
Hinweis: Die Verwendung der Konsole zum Drucken von Informationen im SharedWorker-Thread wird nicht in der Konsole des Hauptthreads angezeigt.
Um sharedWorker zu debuggen, müssen Sie chrome://inspect/ im Chrome-Browser eingeben. Hier können Sie alle laufenden sharedWorker sehen und dann ein unabhängiges Dev-Tool-Panel öffnen.
Kompatibilität
Web-Worker werden von den meisten Browsern bereits unterstützt, sodass bei der Verwendung grundsätzlich keine Kompatibilitätsprobleme berücksichtigt werden müssen.
Die Kompatibilität von sharedWorker in Safari und mobilen Endgeräten ist nicht sehr gut, daher müssen Sie bei der Verwendung vorsichtig sein.