Web-Arbeiter sind JavaScript-Threads, die im Hintergrund laufen und verhindern, dass die Seite einfriert, während schwere Berechnungen durchgeführt werden. Sie verbessern die Leistung komplexer Web-Anwendungen, indem sie große Datenverarbeitung effizient handhaben.
Um einen Web-Arbeiter zu erstellen, verwenden Sie die Web-Arbeiter-API, indem Sie eine Skript-URL und Optionen bereitstellen.
Web-Arbeiter funktionieren, indem sie Aufgaben vom Hauptthread empfangen, sie im Hintergrund bearbeiten und die Ergebnisse zurücksenden.
In diesem Beispiel erstellen wir eine Bildkomprimierungsanwendung mit einem Web-Arbeiter. Der Arbeiter komprimiert Bilder, während der Hauptthread weiterhin reaktionsschnell bleibt, sodass der Benutzer mit der Benutzeroberfläche interagieren und in einem Textbereich schreiben kann.
Das ImageList-Komponente zeigt die originalen und komprimierten Bilder, ihre Größe und eine Download-Option an.
Das Home-Komponente initialisiert den Web-Arbeiter und hört auf Nachrichten, um den Bildzustand zu aktualisieren.
Die handleFileChange-Methode behandelt Bild-Datei-Uploads, sendet sie an den Arbeiter zur Komprimierung und aktualisiert die Benutzeroberfläche mit dem komprimierten Bild.
dev.to
How web worker works with a practical example
