In JavaScript gibt es mehrere Ansätze zur Verbesserung der gesamten Benutzeroberfläche der Website. Der „Web-Worker“ ist ein solcher Ansatz, der es dem Hauptthread ermöglicht, weiterhin auszuführen, ohne blockiert zu werden. Es umfasst eine separate JavaScript-Engine-Instanz und kann daher nicht die Funktionen des Hauptthreads aufrufen.
In diesem Artikel wird die Verwendung erläutert „Web-Worker“ für Multithreading in JavaScript.
Was sind Web Worker?
„Webarbeiter“ entspricht einer Browser-API, die es JavaScript ermöglicht, die Aufgaben parallel/gleichzeitig in einem separaten/dedizierten Thread auszuführen.
Was ist der Bedarf an Web Workern?
Da JavaScript Single-Threaded ist, blockieren die komplexen JavaScript-Codes den UI-Thread, d. h. das Hauptfenster, das alle Aufgaben zum Aktualisieren, Implementieren von Benutzereingabeereignissen usw. erledigt. In einem solchen Szenario wird die Benutzererfahrung beeinträchtigt . Um dieses Problem zu lösen, muss die „Web-Worker“ tritt in Kraft und löst die Blockierung des UI-Threads auf.
Wie verwende ich Web Worker für Multithreading mit JavaScript?
Ein ... machen „Web-Worker“ , verwenden Sie den Worker-Konstruktor. Dabei wird als Argument eine URL verwendet, die dem Pfad der Worker-Skriptdatei entspricht, die die gewünschte Funktionalität implementiert. Um den Worker-Code jedoch in eine HTML-Datei zu integrieren, verwenden Sie a 'Klecks' um Worker-Code zu schreiben.
Syntax (Erstellen eines Web Workers)
const X = neu Arbeiter ( „worker.js“ ) ;Syntax (Senden einer Nachricht an den Arbeiter)
const X = neu Arbeiter ( „worker.js“ ) ;
Syntax (Empfangen einer Nachricht vom Arbeiter)
X. onmessage = Funktion ( Ereignis ) {Konsole. Protokoll ( Ereignis. Daten ) ;
} ;
Beispiel: Verwendung von „Web Worker“ zur Berechnung der Fakultät einer Zahl in JavaScript
Das folgende Beispiel verwendet die 'Arbeiter()' Konstruktor zum Erstellen eines Web-Workers und Berechnen der Fakultät einer Zahl:
< html >
< Kopf >
< h2-Stil = „text-align: center;“ > Beispiel für Web-Worker h2 >
Kopf >
< Körper >
< Skript >
const X = neu Arbeiter ( URL. createObjectURL ( neu Klecks ( [
`
// Worker-Skript
const Tatsache = ( N ) => {
Wenn ( N == 0 || N == 1 ) {
zurückkehren 1n ;
}
anders {
zurückkehren BigInt ( N ) * Tatsache ( BigInt ( N ) - 1n ) ;
}
} ;
selbst. onmessage = ( Ereignis ) => {
const Mit = Tatsache ( Ereignis. Daten ) ;
selbst. POST-Meldung ( Mit. toString ( ) ) ;
} ; `
] , { Typ : „Text/Javascript“ } ) ) ) ;
X. POST-Meldung ( 15n ) ;
X. onmessage = ( Ereignis ) => {
const aus = Ereignis. Daten ;
Konsole. Protokoll ( „Fakultät von 15 über einen Web Worker->“ , aus ) ;
} ;
Körper >
html >
Führen Sie in diesem Code die folgenden Schritte aus:
- Geben Sie zunächst die angegebene Überschrift an.
- Erstellen Sie anschließend eine „Web-Worker“ Objekt mit der URL des Blob-Objekts, das den Code für den Worker enthält.
- Der dem Arbeiter gewidmete Code ist in einer anonymen Funktion enthalten, die die Fakultät der Zahl über eine rekursive Funktion berechnet.
- Außerdem wartet der Worker auf Nachrichten, die über den Hauptthread gesendet werden „self.onmessage“ -Ereignis, ruft die Fakultät der übergebenen Zahl ab und gibt das Ergebnis über das an den Hauptthread weiter 'POST-Meldung()' Methode.
- Erstellen Sie im Hauptthread eine Worker-Instanz und senden Sie ihr eine Nachricht mit der Nummer „ 15n “. Hier, ' N „bezieht sich auf den „BigInt“-Wert.
- Nachdem der Worker mit der Berechnung der Fakultät fertig ist, sendet er das Ergebnis/Ergebnis mithilfe von an den Hauptthread zurück 'POST-Meldung()' Methode.
- Zuletzt ruft/empfängt der Hauptthread das Ergebnis im „onmessage“ Ereignis und gibt die entsprechende Fakultät der Zahl auf der Konsole zurück.
Ausgabe
Vorteile von Web Workern
Parallelverarbeitung : Im Fall der parallelen Ausführung desselben Codes.
Keine Unterbrechung der Codeausführung: Die Ausführung des Codes erfolgt unabhängig von Aktualisierungen usw. auf der aktuellen Seite.
Bewegungsverfolgung: Die gesamte Bewegungserkennung erfolgt im Hintergrund-Worker.
Aktiviertes Multithreading: Diese ermöglichen Multithreading in JavaScript.
Verbesserte Performance: Optimieren Sie die Leistung, indem Sie intensive/herausfordernde Aufgaben in separaten Threads erledigen.
Effektive Benutzererfahrung: Dadurch wird vermieden, dass der Hauptthread blockiert wird, was zu einer reaktionsschnellen Benutzererfahrung führt.
Einschränkungen von Web Workern
Allerdings gibt es auch einige Einschränkungen der Web-Worker. Diese werden wie folgt angegeben:
- Höhere Speicherausnutzung.
- DOM kann in einem Arbeitsthread nicht aktualisiert oder das Fensterobjekt aufgerufen werden.
Abschluss
„Web-Worker“ entspricht einer Browser-API, die es JavaScript ermöglicht, die Aufgaben gleichzeitig in einem separaten/dedizierten Thread auszuführen. Diese können genutzt werden, indem als Argument eine URL verwendet wird, die dem Pfad der Worker-Skriptdatei entspricht. In diesem Blog wurde die Verwendung von „Web Workern“ für Multithreading in JavaScript diskutiert.