Hochleistungs-JavaScript vereinfacht: Web Workers, SharedArrayBuffer und Atomics

JavaScript ist eine Single-Thread-Sprache, was bedeutet, dass Aufgaben einzeln im Haupt-Thread ausgeführt werden. Während dieses Design die Entwicklung vereinfacht, kann es bei rechenintensiven Aufgaben zu Leistungsengpässen führen. In diesem Blog wird untersucht, wie Web Worker, SharedArrayBuffer und Atomics Multithreading in JavaScript ermöglichen können, um Hochleistungsanwendungen zu erstellen.

Warum Web Worker, SharedArrayBuffer und Atomics verwenden?

Web-Worker

Web Worker führen JavaScript in Hintergrundthreads aus und verhindern so, dass intensive Aufgaben Benutzerinteraktionen wie Scrollen oder Klicken auf Schaltflächen blockieren.

SharedArrayBuffer

SharedArrayBuffer ermöglicht die gemeinsame Nutzung des Speichers zwischen dem Hauptthread und den Arbeitern ohne Kopieren und ermöglicht so eine schnellere Kommunikation.

Atomik

Atomics gewährleisten einen sicheren und synchronisierten Zugriff auf den gemeinsamen Speicher, verhindern Race Conditions und sorgen für die Datenkonsistenz über Threads hinweg.

Beispiel: Eine reale Aufgabe mit Web Workern und SharedArrayBuffer

Lassen Sie uns ein einfaches und reales Beispiel implementieren: die Summe eines großen Arrays parallel berechnen.

Schritt 1: Erstellen eines Web-Worker-Skripts

Erstellen Sie eine Datei mit dem Namen worker.js, um Teilsummenberechnungen durchzuführen:

// worker.js
self.onmessage = function (event) {
    const { array, start, end } = event.data;
    let sum = 0;
    for (let i = start; i < end; i++) {
        sum += array[i];
    }
    self.postMessage(sum);
};

Schritt 2: Einrichten des Hauptthreads

Teilen Sie im Hauptskript die Aufgabe unter den Arbeitern auf.

// main.js
const array = Array.from({ length: 1_000_000 }, () => Math.floor(Math.random() * 100));
const numWorkers = 4;
const chunkSize = Math.ceil(array.length / numWorkers);
const workers = [];
const results = [];
let completedWorkers = 0;

// Create a SharedArrayBuffer for the array
const sharedBuffer = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * array.length);
const sharedArray = new Int32Array(sharedBuffer);
sharedArray.set(array);

// Initialize workers
for (let i = 0; i < numWorkers; i++) {
    const worker = new Worker('worker.js');
    workers.push(worker);

    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, array.length);

    worker.postMessage({ array: sharedArray, start, end });

    worker.onmessage = function (event) {
        results[i] = event.data;
        completedWorkers++;

        if (completedWorkers === numWorkers) {
            const totalSum = results.reduce((acc, curr) => acc + curr, 0);
            console.log('Total Sum:', totalSum);
        }
    };
}

Schritt 3: Atomics zur Synchronisierung verwenden

Verwenden Sie Atomics, um den Fortschritt zu verwalten oder sicherzustellen, dass alle Threads abgeschlossen sind, bevor Sie fortfahren.

const progress = new Int32Array(sharedBuffer);
Atomics.add(progress, 0, 1); // Increment progress

if (Atomics.load(progress, 0) === numWorkers) {
    console.log('All workers completed their tasks.');
}

Vorteile dieses Ansatzes

• Reibungslose Benutzererfahrung: Verlagert Berechnungen aus dem Hauptthread.

• Schnellere Kommunikation: SharedArrayBuffer vermeidet das Kopieren von Daten zwischen Threads.

• Thread-Sicherheit: Atomics bietet Tools zur effektiven Handhabung der Synchronisierung.

Anwendungsfälle aus der Praxis

• Echtzeitanalysen: Verarbeiten Sie große Datensätze parallel für schnellere Erkenntnisse.

• Gaming-Engines: Führen Sie Physiksimulationen in separaten Threads durch.

• Medienverarbeitung: Videostreams ohne Verzögerung der Benutzeroberfläche kodieren oder dekodieren.

Referenzen

MDN Web Docs: Web Workers

MDN-Webdokumente: SharedArrayBuffer

MDN Web Docs: Atomics

Das obige ist der detaillierte Inhalt vonHochleistungs-JavaScript vereinfacht: Web Workers, SharedArrayBuffer und Atomics. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!