Was ist Parallelität in JavaScript?

Was ist Parallelität in JavaScript?
Leser wie Sie unterstützen MUO. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

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.





Wie finde ich heraus, welches Motherboard du hast?

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.





MAKEUSEOF-VIDEO DES TAGES Scrollen Sie, um mit dem Inhalt fortzufahren

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 function that simulates a network request 
async function fetchData() {
  const response = await fetch();
  const data = await response.json();
  return data;
}

// Callback function that logs the fetched data to the console
function logData(data) {
  console.log(data);
}

// Promise.all() method that executes multiple promises in parallel
Promise.all([
  fetchData(),
  fetchData(),
]).then((results) => {
  console.log(results);
});

// Call the fetchData function and pass the logData function as a callback
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.

So verbinden Sie den Ring mit Google Home
  Ein Pfeildiagramm eines Web-Worker-Operationsablaufs

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 

// Create a new Web Worker
const worker = new Worker('worker.js');

// Send a message to the Web Worker
worker.postMessage('Hello from the main thread!');

// Listen for messages from the Web Worker
worker.onmessage = function(event) {
  console.log('Received message from Web Worker:', 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.

klicken und ziehen funktioniert nicht mac

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

 // worker.js 

// Listen for messages from the main thread
self.onmessage = function(event) {
  console.log('Received message from main thread:', event.data);

  // Send a message back to the main thread
  self.postMessage("Hello from 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 worker = new Worker('worker.js');

// Send data to the Web Worker for calculation
worker.postMessage([1, 2, 3, 4, 5]);

// Listen for the result from the Web Worker
worker.onmessage = function(event) {
  const result = event.data;
  console.log('Calculation result:', result);
};

Worker.js:

 // Listen for data from the main thread 
self.onmessage = function (event) {
  const numbers = event.data;

  const result = performHeavyCalculation(numbers);

  // Send the result back to the main thread
  self.postMessage(result);
};

function performHeavyCalculation(data) {
  // Perform a complex calculation on the array of numbers
  return data
    .map((number) => Math.pow(number, 3)) // Cube each number
    .filter((number) => number % 2 === 0) // Filter even numbers
    .reduce((sum, number) => sum + number, 0); // Sum all numbers
}

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 : Wenn Sie Daten zwischen dem Hauptthread und Web Workern übergeben, 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.