OUJOOD.COM
Pourquoi utiliser les Web Workers ?
HTML5 cours tutorial – mise à jour 2026JavaScript est mono-thread : tant qu'un script tourne, la page est figée. Impossible de cliquer, de faire défiler ou d'interagir avec quoi que ce soit. Sur un calcul rapide, ça passe inaperçu. Sur un traitement lourd — tri d'un grand tableau, chiffrement, analyse d'image — le navigateur affiche une alerte proposant d'arrêter le script.
Les Web Workers résolvent ce problème en déplaçant le code coûteux dans un thread séparé. Le script tourne en arrière-plan, la page reste réactive, et le résultat est renvoyé à la page une fois le calcul terminé.
Pour illustrer le problème, voici une boucle triple qui bloque complètement la page pendant son exécution :
<!DOCTYPE html>
<html>
<head>
<title>Calcul sans Web Worker</title>
<meta charset="UTF-8" />
<script type="text/javascript">
function calc() {
var somme = 0;
// Triple boucle : la page est totalement bloquée pendant ce calcul
for (var i = 1; i < 10000; i++) {
for (var j = 1; j < 10000; j++) {
for (var k = 1; k < 10000; k++) {
somme += k + j + i;
}
}
}
document.getElementById("resultat").innerHTML = somme;
}
</script>
</head>
<body>
<input type="submit" onClick="calc();" value="Calculer" />
<p>Résultat = <input type="text" id="resultat"></p>
</body>
</html>
Cliquez sur le bouton et essayez d'interagir avec la page pendant le calcul : elle ne répond plus. C'est exactement ce problème que les Web Workers règlent.
Compatibilité navigateurs
Les Web Workers sont supportés par tous les navigateurs modernes : Chrome, Firefox, Safari, Opera et Edge. Internet Explorer 10+ les supporte aussi partiellement. En 2026, cette API est stable et fiable sur tous les environnements desktop et mobile.
Créer un Web Worker : le fichier externe
Un Web Worker vit dans un fichier JavaScript séparé. Il ne peut pas accéder au DOM, à window ou à document — il n'a accès qu'à self, qui représente son propre contexte d'exécution.
La communication avec la page se fait exclusivement par messages : le worker reçoit un message via self.onmessage, fait son travail, puis renvoie le résultat avec self.postMessage().
Voici le fichier calcule.js qui contient notre calcul déplacé hors de la page :
// calcule.js — fichier du Web Worker // self.onmessage est déclenché quand la page envoie un message au worker self.onmessage = function(e) { var somme = 0; for (var i = 1; i < 1000; i++) { for (var j = 1; j < 1000; j++) { for (var k = 1; k < 1000; k++) { somme += k + j + i; } } } // postMessage() renvoie le résultat à la page HTML self.postMessage(somme); };
Remarque : Les Web Workers sont conçus pour les tâches intensives en CPU : traitement de données, chiffrement, compression, analyse d'images. Pour un calcul simple qui se termine en quelques millisecondes, le coût de création du worker ne vaut pas la peine.
Vérifier le support avant de créer un worker
Avant d'instancier un Web Worker, vérifiez que le navigateur le supporte. Sans cette précaution, le script planterait silencieusement sur les environnements qui ne connaissent pas l'API.
if (typeof(Worker) !== "undefined") {
// Le navigateur supporte les Web Workers : on peut continuer
} else {
// Fallback : afficher un message ou exécuter le calcul de façon synchrone
document.getElementById("resultat").innerHTML = "Web Workers non supporté.";
}
Créer l'objet Worker et écouter les messages
Côté page HTML, on instancie le worker avec new Worker() en lui passant le chemin du fichier JavaScript. On attache ensuite un écouteur onmessage pour récupérer le résultat quand le worker a terminé, puis on démarre le calcul avec postMessage().
// Créer le worker uniquement s'il n'existe pas déjà if (typeof(w) === "undefined") { w = new Worker("calcule.js"); } // Écouter les messages renvoyés par le worker w.onmessage = function(event) { // event.data contient la valeur envoyée par self.postMessage() dans le worker document.getElementById("resultat").innerHTML = event.data; }; // Démarrer le worker en lui envoyant un message (le contenu importe peu ici) w.postMessage("");
Le test typeof(w) === "undefined" évite de créer plusieurs instances du même worker si l'utilisateur clique plusieurs fois sur le bouton. Chaque instance tourne dans son propre thread et consomme des ressources.
Arrêter un Web Worker
Un worker continue de tourner — et de consommer de la mémoire — jusqu'à ce qu'il soit explicitement arrêté, même si la page n'attend plus de réponse. La méthode terminate() l'arrête immédiatement depuis la page :
w.terminate();
Le worker peut aussi s'arrêter lui-même depuis son propre fichier avec self.close(). C'est utile quand le travail est terminé et qu'aucun autre message n'est attendu.
Exemple complet
Voici la page HTML finale qui combine toutes les étapes : vérification du support, création du worker, réception du résultat et gestion du bouton.
<!DOCTYPE html>
<html>
<head>
<title>Web Worker — exemple complet</title>
<meta charset="UTF-8" />
<script type="text/javascript">
var w;
function calc() {
if (typeof(Worker) === "undefined") {
// Navigateur trop ancien : message d'information
document.getElementById("resultat").innerHTML = "Web Workers non supporté.";
return;
}
// Créer le worker une seule fois
if (typeof(w) === "undefined") {
w = new Worker("calcule.js");
}
// Afficher le résultat dès que le worker répond
w.onmessage = function(event) {
document.getElementById("resultat").innerHTML = event.data;
};
// Lancer le calcul
w.postMessage("");
}
function arreter() {
if (typeof(w) !== "undefined") {
w.terminate(); // Arrêt immédiat du worker
w = undefined;
document.getElementById("resultat").innerHTML = "Worker arrêté.";
}
}
</script>
</head>
<body>
<input type="submit" onClick="calc();" value="Calculer" />
<input type="submit" onClick="arreter();" value="Arrêter" />
<p>Résultat = <span id="resultat"></span></p>
</body>
</html>
Ce à quoi un Web Worker n'a pas accès
Un Web Worker s'exécute dans un contexte isolé, sans accès aux éléments de la page. Les objets suivants sont inaccessibles depuis un fichier worker :
- window : le contexte global de la page
- document : le DOM et ses éléments HTML
- parent : la fenêtre parente dans le cas d'une iframe
En revanche, un worker a accès à XMLHttpRequest et à l'API fetch — il peut donc faire des appels réseau de son côté et renvoyer les données à la page via postMessage().
Par carabde | Mis à jour le 13 avril 2026