Qu'est-ce que le parallélisme en JavaScript ?

JavaScript peut avoir du mal avec les tâches gourmandes en performances car il s'agit d'un langage à thread unique. En utilisant le parallélisme, vous pouvez réaliser une exécution multithread en JavaScript et améliorer les performances et la réactivité de vos applications Web modernes.

Parallélisme dans la programmation JavaScript

Le parallélisme est crucial dans l'informatique moderne pour améliorer les performances et l'évolutivité. Pour ce faire, il utilise efficacement les ressources disponibles.

Une technique courante utilisée pour réaliser le parallélisme dans la programmation est le multi-threading. Le thread JavaScript, cependant, est un système à thread unique et ne peut gérer qu'une seule tâche à la fois. Cela signifie qu'il n'est pas familier avec les exécutions de programmes parallèles.

JavaScript falsifie la programmation parallèle

Une idée fausse courante à propos du parallélisme est que vous pouvez y parvenir en utilisant techniques de programmation asynchrone comme async/wait, les rappels et les promesses :

// Fonction Async/wait qui simule une requête réseau
asynchronefonctionrécupérer les données() {
constante réponse = attendre aller chercher();
constante données = attendre réponse.json();
retour données;
}
// Fonction de rappel qui enregistre les données récupérées dans la console
fonctionlogData(données) {
console.log (données);
}
// Méthode Promise.all() qui exécute plusieurs promesses en parallèle
Promesse.tous([
 récupérer les données(),
 récupérer les données(),
]).alors((résultats) => {
console.log (résultats) ;
});
// Appelez la fonction fetchData et passez la fonction logData comme rappel
fetchData().then (logData);

Ces techniques n'exécutent pas réellement de code en parallèle. JavaScript utilise la boucle d'événements pour imiter la programmation parallèle dans sa conception à thread unique.

La boucle d'événements est un élément fondamental de l'environnement d'exécution JavaScript. Il vous permet d'exécuter des opérations asynchrones, telles que des requêtes réseau, en arrière-plan sans bloquer le thread unique principal.

La boucle d'événements recherche en permanence de nouveaux événements ou tâches dans une file d'attente et les exécute un par un de manière séquentielle. Cette technique permet à JavaScript d'atteindre la concurrence et le parallélisme théorique.

Concurrence vs. Parallélisme

La concurrence et le parallélisme sont souvent mal compris et échangés dans le monde JavaScript.

La simultanéité en JavaScript fait référence à la capacité d'exécuter plusieurs tâches en chevauchant l'exécution des tâches. Où une tâche peut commencer avant qu'une autre ne se termine, mais les tâches ne peuvent ni commencer ni se terminer simultanément. Cela permet à JavaScript de gérer efficacement les opérations, telles que la récupération de données à partir d'une API REST ou lire des fichiers, sans bloquer le fil d'exécution principal.

Le parallélisme, quant à lui, fait référence à la capacité d'exécuter plusieurs tâches simultanément sur plusieurs threads. Ces threads d'arrière-plan peuvent exécuter des tâches indépendamment et simultanément. Cela ouvre des opportunités pour atteindre un véritable parallélisme dans les applications JavaScript.

Les applications de JavaScript peuvent atteindre un véritable parallélisme grâce à l'utilisation des Web Workers.

Les Web Workers introduisent le parallélisme à JavaScript

Les Web Workers sont une fonctionnalité des navigateurs Web modernes qui permettent au code JavaScript de s'exécuter dans des threads d'arrière-plan, distincts du thread d'exécution principal. Contrairement au thread principal, qui gère les interactions des utilisateurs et les mises à jour de l'interface utilisateur. Le Web Worker serait dédié à l'exécution de tâches intensives en calcul.

Ci-dessous une représentation schématique du fonctionnement d'un Web Worker en JavaScript.

Le thread principal et le Web Worker peuvent communiquer en passant des messages. En utilisant le posterMessage méthode pour envoyer des messages et la sur message gestionnaire d'événements pour recevoir des messages, vous pouvez transmettre des instructions ou des données dans les deux sens.

Création d'un Web Worker

Pour créer un Web Worker, vous devez créer un fichier JavaScript séparé.

Voici un exemple:

// main.js
// Créer un nouveau Web Worker
constante travailleur = nouveau Ouvrier('worker.js');
// Envoie un message au Web Worker
travailleur.postMessage('Bonjour du fil principal!');
// Écoute les messages du Web Worker
travailleur.onmessage = fonction(événement) {
console.enregistrer('Message reçu du Web Worker :', événement.données);
};

L'exemple ci-dessus crée un nouveau Web Worker en transmettant le chemin d'accès au script worker (travailleur.js) comme argument de la Ouvrier constructeur. Vous pouvez envoyer un message au Web Worker en utilisant le posterMessage et écoutez les messages du Web Worker à l'aide de la sur message gestionnaire d'événements.

Vous devez ensuite créer le script worker (travailleur.js) déposer:

// travailleur.js
// Écoute les messages du thread principal
self.onmessage = fonction(événement) {
console.enregistrer('Message reçu du fil principal :', événement.données);
// Renvoie un message au fil principal
 self.postMessage("Bonjour de worker.js !");
};

Le script Web Worker écoute les messages du thread principal à l'aide de la sur message gestionnaire d'événements. Dès réception d'un message, vous vous déconnectez du message à l'intérieur événement.données et envoyer un nouveau message au fil principal avec le posterMessage méthode.

Tirer parti du parallélisme avec les Web Workers

Le principal cas d'utilisation des Web Workers consiste à exécuter en parallèle des tâches JavaScript gourmandes en calculs. En déchargeant ces tâches sur les Web Workers, vous pouvez obtenir des améliorations significatives des performances.

Voici un exemple d'utilisation d'un web worker pour effectuer un calcul lourd :

// main.js
constante travailleur = nouveau Ouvrier('worker.js');
// Envoi des données au Web Worker pour calcul
travailleur.postMessage([1, 2, 3, 4, 5]);
// Écoute le résultat du Web Worker
travailleur.onmessage = fonction(événement) {
constante résultat = événement.données ;
console.enregistrer('Résultat du calcul :', résultat);
};

Worker.js :

// Écoute les données du thread principal
self.onmessage = fonction (événement) {
constante nombres = événement.données ;
constante result = performHeavyCalculation (nombres);
// Renvoie le résultat au thread principal
 self.postMessage (résultat);
};
fonctionperformHeavyCalculation(données) {
// Effectue un calcul complexe sur le tableau de nombres
retour données
 .carte((nombre) =>Mathématiques.pow (nombre, 3)) // Cube chaque nombre
 .filtre((nombre) => nombre % 20) // Filtrer les nombres pairs
 .réduire((somme, nombre) => somme + nombre, 0); // Somme de tous les nombres
}

Dans cet exemple, vous transmettez un tableau de nombres du thread principal au Web Worker. Le Web Worker effectue le calcul à l'aide du tableau de données fourni et renvoie le résultat au thread principal. Le performHeavyCalculation() La fonction mappe chaque nombre sur son cube, filtre les nombres pairs et les additionne enfin.

Limites et considérations

Bien que les Web Workers fournissent un mécanisme permettant d'atteindre le parallélisme en JavaScript, il est important de prendre en compte quelques limitations et considérations :

• Pas de mémoire partagée: les Web Workers fonctionnent dans des threads séparés et ne partagent pas de mémoire avec le thread principal. Ainsi, ils ne peuvent pas accéder directement aux variables ou aux objets du thread principal sans passer de message.
• Sérialisation et désérialisation: Lors de la transmission de données entre le thread principal et les Web Workers, vous devez sérialiser et désérialiser les données car la transmission de messages est une communication textuelle. Ce processus entraîne un coût de performance et peut avoir un impact sur les performances globales de l'application.
• Prise en charge du navigateur: Bien que les Web Workers soient bien pris en charge dans la plupart des navigateurs Web modernes, certains navigateurs plus anciens ou certains environnements limités peuvent avoir une prise en charge partielle ou inexistante des Web Workers.

Atteindre le vrai parallélisme en JavaScript

Le parallélisme en JavaScript est un concept passionnant qui permet une véritable exécution simultanée de tâches, même dans un langage principalement monothread. Avec l'introduction de Web Workers, vous pouvez exploiter la puissance du parallélisme et obtenir des améliorations significatives des performances de vos applications JavaScript.