JavaScript - Worker API: Débloquer la Puissance du Traitement Parallèle

Bonjour là-bas, futurs magiciens JavaScript ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde des Web Workers. Imaginez-vous être un chef dans une cuisine occupée. Parfois, vous avez besoin de mains supplémentaires pour vous aider à préparer un repas complexe. C'est exactement ce que font les Web Workers pour votre code JavaScript - ils prêtent une main pour gérer des tâches lourdes sans ralentir votre processus de cuisson... je veux dire, de codage !

JavaScript - Worker API

API Web Worker : Votre Second Chef JavaScript

L'API Web Worker est comme avoir un chef assistant dans votre cuisine JavaScript. Elle vous permet d'exécuter des scripts en arrière-plan, indépendamment des autres scripts. Cela signifie que vous pouvez effectuer des tâches chronophages sans interférer avec les performances de votre page principale. Génial, non ?

Mettons-nous à l'eau et voyons comment nous pouvons mettre ces assistants au travail !

Vérifier le Support des Web Workers

Avant de commencer à utiliser les Web Workers, nous devons nous assurer que notre navigateur les prend en charge. C'est comme vérifier si votre cuisine a le bon équipement avant de commencer à cuisiner. Voici comment nous faisons :

if (typeof(Worker) !== "undefined") {
// Super ! Les Web Workers sont supportés
console.log("Let's get to work !");
} else {
// Oups ! Les Web Workers ne sont pas supportés
console.log("Désolé, votre navigateur ne supporte pas les Web Workers");
}

Dans ce morceau de code, nous vérifions si l'objet Worker est défini. Si oui, c'est parti. Sinon, nous devrons trouver un autre moyen de gérer nos tâches.

Créer un Fichier Web Worker

Maintenant que nous savons que notre navigateur peut gérer les Web Workers, créons-en un ! Un Web Worker est comme une recette que notre chef assistant (le navigateur) suivra. Nous allons créer un fichier JavaScript séparé pour notre Web Worker.

Créons un fichier appelé worker.js :

// worker.js
self.addEventListener('message', function(e) {
const result = e.data * 2;
self.postMessage(result);
}, false);

Ce worker écoute un message, double le nombre qu'il reçoit, et envoie le résultat en retour. Simple, n'est-ce pas ?

Créer un Objet Web Worker

Maintenant que nous avons notre fichier worker, créons un objet Web Worker dans notre script principal :

let myWorker;

if (typeof(Worker) !== "undefined") {
myWorker = new Worker("worker.js");
} else {
console.log("Les Web Workers ne sont pas supportés dans votre navigateur !");
}

Ce code crée un nouvel objet Web Worker, pointant vers notre fichier worker.js. C'est comme embaucher notre assistant chef et lui donner notre recette.

Communiquer avec Notre Web Worker

Voyons maintenant comment nous pouvons envoyer une tâche à notre worker et obtenir le résultat en retour :

// Envoyer des données au worker
myWorker.postMessage(10);

// Recevoir des données du worker
myWorker.onmessage = function(e) {
console.log("Le worker a envoyé : " + e.data);
};

Dans cet exemple, nous envoyons le nombre 10 à notre worker. Le worker le double et envoie 20 en retour. C'est comme demander à votre assistant de doubler les ingrédients d'une recette !

Mettre Fin à l'Exécution du Web Worker

Lorsque nous avons terminé avec notre Web Worker, nous devrions le licencier pour libérer des ressources. C'est comme dire à votre assistant chef qu'ils peuvent rentrer chez eux après que le repas est prêt :

myWorker.terminate();
myWorker = undefined;

Ce code met fin au worker et définit la variable myWorker à undefined, supprimant ainsi notre référence à elle.

Exemple : Programme Complet de Web Worker

Mettons tout cela ensemble dans un exemple complet :

<!DOCTYPE html>
<html>
<body>

<p>Compter les nombres : <output id="result"></output></p>
<button onclick="startWorker()">Démarrer Worker</button>
<button onclick="stopWorker()">Arrêter Worker</button>

<script>
let w;

function startWorker() {
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("worker.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Désolé ! Aucun support pour les Web Workers.";
}
}

function stopWorker() {
w.terminate();
w = undefined;
}
</script>

</body>
</html>

Et voici notre worker.js :

let i = 0;

function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

Cet exemple crée un worker qui compte les nombres, mettant à jour toutes les demi-secondes. La page principale peut démarrer et arrêter ce worker, démontrant comment nous pouvons contrôler notre "assistant chef" depuis la "cuisine" principale.

Cas d'Utilisation des Web Workers

Les Web Workers sont extrêmement utiles pour des tâches qui peuvent prendre longtemps à se terminer. Voici quelques cas d'utilisation courants :

Calculs complexes
Traitement de grandes données
Traitement d'images ou de vidéos
Opérations réseau
Analyse de grands ensembles de données (comme les fichiers CSV)

Pensez à ces cas comme des recettes complexes que votre assistant chef peut travailler sans perturber votre processus de cuisson principal !

Web Workers et le DOM

Une chose importante à se souvenir : les Web Workers ne peuvent pas accéder directement au DOM (Document Object Model). C'est comme si votre assistant chef ne pouvait pas directement servir les plats aux clients - ils doivent d'abord vous remettre la nourriture préparée.

Si un Worker doit interagir avec la page web, il doit envoyer un message au script principal, qui peut alors mettre à jour le DOM.

Conclusion

Les Web Workers sont un outil puissant dans votre boîte à outils JavaScript. Ils vous permettent d'effectuer des tâches complexes sans ralentir votre script principal, tout comme un assistant chef vous aide à préparer un repas complexe plus efficacement.

Souvenez-vous, la clé de l'utilisation efficace des Web Workers est d'identifier les tâches qui peuvent être exécutées indépendamment de votre script principal. Avec la pratique, vous orchestrerez une cuisine entière de Web Workers, créant des applications web rapides et réactives capables de gérer des tâches complexes avec facilité.

Bonne programmation, et puisse votre cuisine JavaScript toujours être animée par des Web Workers efficaces !

Credits: Image by storyset

Tutoriel précédent:

JavaScript - API Forms

Tutoriel suivant:

JavaScript - API Fetch