JavaScript peut être confronté à des tâches exigeantes en termes de performances car il s’agit d’un langage à un seul fil d’exécution. En utilisant le parallélisme, vous pouvez obtenir une exécution multithread en JavaScript et améliorer les performances et la réactivité de vos applications web modernes.
Le parallélisme dans la programmation JavaScript
Le parallélisme est essentiel dans l’informatique moderne pour améliorer les performances et l’évolutivité. Il permet d’utiliser efficacement les ressources disponibles.
Le multithreading est une technique couramment utilisée pour réaliser le parallélisme dans la programmation. Le thread JavaScript, cependant, est un système monofil et ne peut gérer qu’une seule tâche à la fois. Cela signifie qu’il n’est pas familiarisé avec l’exécution de programmes en parallèle.
JavaScript simule la programmation parallèle
Une idée fausse très répandue à propos du parallélisme est qu’il est possible de l’obtenir en utilisant des techniques de programmation asynchrones telles que async/await, callbacks et promises :
// 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);
Ces techniques n’exécutent pas réellement le code en parallèle. JavaScript utilise la boucle d’événements pour imiter la programmation parallèle au sein de sa conception monotâche.
La boucle événementielle est un élément fondamental de l’environnement d’exécution JavaScript. Elle vous permet d’exécuter des opérations asynchrones, telles que des requêtes réseau, en arrière-plan sans bloquer le thread principal.
La boucle d’événements vérifie constamment la présence de nouveaux événements ou de nouvelles 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 et parallélisme
La simultanéité et le parallélisme sont souvent mal compris et confondus dans le monde du JavaScript.
La concomitance en JavaScript fait référence à la capacité d’exécuter des tâches multiples en chevauchant l’exécution des tâches. Une tâche peut commencer avant qu’une autre ne s’achève, mais les tâches ne peuvent ni commencer ni se terminer simultanément. Cela permet à JavaScript de traiter efficacement des opérations, telles que l’extraction de données d’une API REST ou la lecture de 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 fils d’exécution. Ces threads d’arrière-plan peuvent exécuter des tâches indépendamment et simultanément. Cela permet d’obtenir un véritable parallélisme dans les applications JavaScript.
Les applications JavaScript peuvent atteindre un véritable parallélisme grâce à l’utilisation de Web Workers.
Les Web Workers introduisent le parallélisme dans JavaScript
Les Web Workers sont une fonctionnalité des navigateurs web modernes qui permet au code JavaScript de s’exécuter en arrière-plan, séparément du fil d’exécution principal. Contrairement au fil d’exécution principal, qui gère les interactions avec l’utilisateur et les mises à jour de l’interface utilisateur. Le Web Worker est dédié à l’exécution de tâches à forte intensité de calcul.
Le diagramme ci-dessous représente le fonctionnement d’un Web Worker en JavaScript.
Le thread principal et le Web Worker peuvent communiquer en utilisant le passage de messages. En utilisant le postMessage pour envoyer des messages et la méthode onmessage 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
// 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);
};
L’exemple ci-dessus crée un nouveau Web Worker en passant le chemin d’accès au script worker (worker.js) comme argument de la fonction Travailleur . Vous pouvez envoyer un message au Web Worker à l’aide de la fonction postMessage et écouter les messages du Web Worker à l’aide de la méthode onmessage gestionnaire d’événement.
Vous devez ensuite créer le script de travailleur (worker.js) fichier :
// 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!");
};
Le script Web Worker est à l’écoute des messages provenant du thread principal à l’aide de la fonction onmessage gestionnaire d’événements. Lors de la réception d’un message, vous déconnectez le message à l’intérieur de event.data et envoyer un nouveau message au thread principal avec la balise postMessage méthode.
Exploiter le parallélisme avec les Web Workers
Le principal cas d’utilisation des Web Workers est l’exécution en parallèle de tâches JavaScript à forte intensité de calcul. En déchargeant ces tâches sur les Web Workers, vous pouvez obtenir des améliorations significatives en termes de performances.
Voici un exemple d’utilisation d’un Web Workers pour effectuer un calcul lourd :
// 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
}
Dans cet exemple, vous passez un tableau de nombres du thread principal au Web Worker. Le Web Worker effectue le calcul en utilisant le tableau de données fourni et renvoie le résultat au thread principal. Le performHeavyCalculation() permet de faire correspondre chaque nombre à son cube, de filtrer les nombres pairs et enfin de les additionner.
Limites et considérations
Bien que les Web Workers offrent 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 la mémoire avec le thread principal. Ils ne peuvent donc pas accéder directement aux variables ou aux objets du thread principal sans passer de message.
- Sérialisation et désérialisation: Lorsque vous transmettez des 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 basée sur le texte. Ce processus entraîne un coût de performance et peut avoir un impact sur la performance globale de l’application.
- Support des navigateurs: Bien que les Web Workers soient bien supportés par la plupart des navigateurs modernes, certains navigateurs plus anciens ou des environnements limités peuvent ne supporter que partiellement ou pas du tout les Web Workers.
Le vrai parallélisme en JavaScript
Le parallélisme en JavaScript est un concept passionnant qui permet une véritable exécution concurrente des tâches, même dans un langage essentiellement monotâche. Avec l’introduction des Web Workers, vous pouvez exploiter la puissance du parallélisme et améliorer considérablement les performances de vos applications JavaScript.