Was ist Parallelität in JavaScript?

JavaScript kann bei leistungsintensiven Aufgaben Probleme haben, da es sich um eine Single-Threaded-Sprache handelt. Mithilfe der Parallelität können Sie eine Multithread-Ausführung in JavaScript erreichen und die Leistung und Reaktionsfähigkeit Ihrer modernen Web-Apps verbessern.

Parallelität in der JavaScript-Programmierung

Parallelität ist im modernen Computing von entscheidender Bedeutung für die Verbesserung der Leistung und Skalierbarkeit. Dies geschieht durch die effektive Nutzung der verfügbaren Ressourcen.

Eine gängige Technik zur Erzielung von Parallelität in der Programmierung ist Multithreading. Der JavaScript-Thread ist jedoch ein Single-Thread-System und kann jeweils nur eine Aufgabe bearbeiten. Das bedeutet, dass es mit parallelen Programmausführungen nicht vertraut ist.

JavaScript fälscht parallele Programmierung

Ein weit verbreitetes Missverständnis über Parallelität ist, dass man sie mithilfe von erreichen kann

Asynchrone Programmiertechniken wie async/await, Rückrufe und Versprechen:

// Async/await-Funktion, die eine Netzwerkanfrage simuliert
asynchronFunktionDaten abrufen() {
const Antwort = erwarten bringen();
const Daten = erwarten Antwort.json();
zurückkehren Daten;
}
// Callback-Funktion, die die abgerufenen Daten in der Konsole protokolliert
FunktionLogdaten(Daten) {
Konsole.Logdaten);
}
// Promise.all()-Methode, die mehrere Versprechen parallel ausführt
Versprechen.alle([
 Daten abrufen(),
 Daten abrufen(),
]).Dann((Ergebnisse) => {
Konsole.log (Ergebnisse);
});
// Rufen Sie die fetchData-Funktion auf und übergeben Sie die logData-Funktion als Rückruf
fetchData().then (logData);

Bei diesen Techniken wird Code nicht tatsächlich parallel ausgeführt. JavaScript verwendet die Ereignisschleife, um parallele Programmierung innerhalb seines Single-Thread-Designs nachzuahmen.

Die Ereignisschleife ist ein grundlegender Bestandteil der JavaScript-Laufzeitumgebung. Es ermöglicht Ihnen, asynchrone Vorgänge, wie z. B. Netzwerkanfragen, im Hintergrund auszuführen, ohne den einzelnen Hauptthread zu blockieren.

Die Ereignisschleife sucht ständig nach neuen Ereignissen oder Aufgaben in einer Warteschlange und führt diese nacheinander einzeln aus. Mit dieser Technik kann JavaScript Parallelität und theoretische Parallelität erreichen.

Parallelität vs. Parallelität

Parallelität und Parallelität werden in der JavaScript-Welt oft missverstanden und verwechselt.

Parallelität bezieht sich in JavaScript auf die Fähigkeit, mehrere Aufgaben auszuführen, indem die Ausführung der Aufgaben überlappt wird. Wo eine Aufgabe beginnen kann, bevor eine andere abgeschlossen ist, die Aufgaben jedoch weder gleichzeitig beginnen noch enden können. Dies ermöglicht es JavaScript, Vorgänge effizient abzuwickeln, wie zum Beispiel das Abrufen von Daten von einer REST-API oder Dateien lesen, ohne den Hauptausführungsthread zu blockieren.

Parallelität hingegen bezieht sich auf die Fähigkeit, mehrere Aufgaben gleichzeitig über mehrere Threads hinweg auszuführen. Diese Hintergrundthreads können Aufgaben unabhängig und gleichzeitig ausführen. Dies eröffnet Möglichkeiten, echte Parallelität in JavaScript-Anwendungen zu erreichen.

JavaScript-Anwendungen können durch echte Parallelität erreicht werden der Einsatz von Web Workern.

Web Worker führen Parallelität in JavaScript ein

Web Worker sind eine Funktion moderner Webbrowser, die die Ausführung von JavaScript-Code in Hintergrundthreads ermöglichen, getrennt vom Hauptausführungsthread. Im Gegensatz zum Hauptthread, der Benutzerinteraktionen und UI-Updates verarbeitet. Der Web Worker würde sich der Ausführung rechenintensiver Aufgaben widmen.

Unten finden Sie eine Diagrammdarstellung der Funktionsweise eines Web Workers in JavaScript.

Der Hauptthread und der Web Worker können über Message Passing kommunizieren. Verwendung der POST-Meldung Methode zum Senden von Nachrichten und die onmessage Mit einem Event-Handler zum Empfangen von Nachrichten können Sie Anweisungen oder Daten hin und her übergeben.

Erstellen eines Web Workers

Um einen Web Worker zu erstellen, müssen Sie eine separate JavaScript-Datei erstellen.

Hier ist ein Beispiel:

// main.js
// Einen neuen Web Worker erstellen
const Arbeiter = neu Arbeiter('worker.js');
// Eine Nachricht an den Web Worker senden
worker.postMessage(„Hallo vom Hauptthread!“);
// Auf Nachrichten vom Web Worker warten
worker.onmessage = Funktion(Fall) {
Konsole.Protokoll(„Nachricht von Web Worker erhalten:“, event.data);
};

Das obige Beispiel erstellt einen neuen Web Worker, indem der Pfad an das Worker-Skript übergeben wird (worker.js) als Argument für die Arbeiter Konstrukteur. Sie können mit dem eine Nachricht an den Web Worker senden POST-Meldung Methode und lauschen Sie mithilfe der auf Nachrichten vom Web Worker onmessage Ereignishandler.

Anschließend sollten Sie das Worker-Skript erstellen (worker.js) Datei:

// worker.js
// Auf Nachrichten vom Hauptthread warten
self.onmessage = Funktion(Fall) {
Konsole.Protokoll(„Nachricht vom Hauptthread erhalten:“, event.data);
// Eine Nachricht zurück an den Hauptthread senden
 self.postMessage(„Hallo von worker.js!“);
};

Das Web Worker-Skript lauscht mithilfe von auf Nachrichten vom Hauptthread onmessage Ereignishandler. Wenn Sie eine Nachricht erhalten, melden Sie die Nachricht darin ab event.data und senden Sie eine neue Nachricht an den Hauptthread mit POST-Meldung Methode.

Nutzung der Parallelität mit Web Workern

Der Hauptanwendungsfall für Web Worker ist die parallele Ausführung rechenintensiver JavaScript-Aufgaben. Durch die Auslagerung dieser Aufgaben an Web Worker können Sie erhebliche Leistungsverbesserungen erzielen.

Hier ist ein Beispiel für die Verwendung eines Web-Workers zur Durchführung einer umfangreichen Berechnung:

// main.js
const Arbeiter = neu Arbeiter('worker.js');
// Daten zur Berechnung an den Web Worker senden
worker.postMessage([1, 2, 3, 4, 5]);
// Auf das Ergebnis des Web Workers warten
worker.onmessage = Funktion(Fall) {
const result = event.data;
Konsole.Protokoll('Berechnungsergebnis:', Ergebnis);
};

Worker.js:

// Auf Daten vom Hauptthread warten
self.onmessage = Funktion (Fall) {
const zahlen = event.data;
const Ergebnis = performHeavyCalculation (Zahlen);
// Das Ergebnis zurück an den Hauptthread senden
 self.postMessage (Ergebnis);
};
FunktionperformHeavyCalculation(Daten) {
// Führen Sie eine komplexe Berechnung für das Zahlenarray durch
zurückkehren Daten
 .Karte((Nummer) =>Mathematik.pow (Anzahl, 3)) // Würfeln Sie jede Zahl
 .Filter((Nummer) => Nummer % 20) // Gerade Zahlen filtern
 .reduzieren((Summe, Zahl) => Summe + Zahl, 0); // Summiere alle Zahlen
}

In diesem Beispiel übergeben Sie ein Zahlenarray vom Hauptthread an den Web Worker. Der Web Worker führt die Berechnung mithilfe des bereitgestellten Datenarrays durch und sendet das Ergebnis zurück an den Hauptthread. Der performHeavyCalculation() Die Funktion ordnet jede Zahl ihrem Würfel zu, filtert die geraden Zahlen heraus und summiert sie schließlich.

Einschränkungen und Überlegungen

Während Web Worker einen Mechanismus zum Erreichen von Parallelität in JavaScript bereitstellen, ist es wichtig, einige Einschränkungen und Überlegungen zu berücksichtigen:

• Kein gemeinsamer Speicher: Web Worker arbeiten in separaten Threads und teilen sich den Speicher nicht mit dem Hauptthread. Daher können sie ohne Nachrichtenübermittlung nicht direkt vom Hauptthread aus auf Variablen oder Objekte zugreifen.
• Serialisierung und Deserialisierung: Beim Übertragen von Daten zwischen dem Hauptthread und Web Workern müssen Sie die Daten serialisieren und deserialisieren, da es sich bei der Nachrichtenübermittlung um eine textbasierte Kommunikation handelt. Dieser Vorgang verursacht Leistungseinbußen und kann sich auf die Gesamtleistung der App auswirken.
• Browser-Unterstützung: Obwohl Web Worker in den meisten modernen Webbrowsern gut unterstützt werden, unterstützen einige ältere Browser oder eingeschränkte Umgebungen Web Worker möglicherweise teilweise oder gar nicht.

Erreichen Sie echte Parallelität in JavaScript

Parallelität in JavaScript ist ein spannendes Konzept, das eine echte gleichzeitige Ausführung von Aufgaben ermöglicht, selbst in einer hauptsächlich Single-Threaded-Sprache. Mit der Einführung von Web Workern können Sie die Leistungsfähigkeit der Parallelität nutzen und erhebliche Leistungsverbesserungen in Ihren JavaScript-Anwendungen erzielen.