JavaScript haute performance simplifié : Web Workers, SharedArrayBuffer et Atomics

JavaScript est un langage monothread, ce qui signifie que les tâches s'exécutent une par une sur le thread principal. Bien que cette conception simplifie le développement, elle peut entraîner des goulots d'étranglement en termes de performances pour les tâches lourdes en termes de calcul. Ce blog explore comment Web Workers, SharedArrayBuffer et Atomics peuvent activer le multithreading en JavaScript pour créer des applications hautes performances.

Pourquoi utiliser Web Workers, SharedArrayBuffer et Atomics ?

Travailleurs du Web

Les Web Workers exécutent JavaScript dans les threads d'arrière-plan, empêchant ainsi les tâches intensives de bloquer les interactions des utilisateurs, comme le défilement ou les clics sur des boutons.

SharedArrayBuffer

SharedArrayBuffer permet de partager la mémoire entre le thread principal et les nœuds de calcul sans copie, ce qui permet une communication plus rapide.

Atomique

Atomics garantit un accès sûr et synchronisé à la mémoire partagée, évitant ainsi les conditions de concurrence critique et maintenant la cohérence des données entre les threads.

Exemple : une tâche réelle avec des Web Workers et SharedArrayBuffer

Implémentons un exemple simple et concret : calculer la somme d'un grand tableau en parallèle.

Étape 1 : Création d'un script Web Worker

Créez un fichier nommé worker.js pour gérer les calculs de somme partielle :

// 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);
};

Étape 2 : Configuration du fil de discussion principal

Dans le script principal, répartissez la tâche entre les travailleurs.

// 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);
        }
    };
}

Étape 3 : Utiliser l'atomique pour la synchronisation

Utilisez Atomics pour gérer la progression ou vous assurer que tous les sujets sont terminés avant de continuer.

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.');
}

Avantages de cette approche

• Expérience utilisateur fluide : Décharge le calcul du thread principal.

• Communication plus rapide : SharedArrayBuffer évite la copie de données entre les threads.

• Sécurité des threads : Atomics fournit des outils pour gérer efficacement la synchronisation.

Cas d'utilisation réels

• Analyses en temps réel : Traitez de grands ensembles de données en parallèle pour obtenir des informations plus rapides.

• Moteurs de jeu : Effectuez des simulations physiques dans des threads séparés.

• Traitement multimédia : Encodez ou décodez les flux vidéo sans décalage de l'interface utilisateur.

Références

MDN Web Docs : Web Workers

Documents Web MDN : SharedArrayBuffer

MDN Web Docs : Atomique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!