HTML API des Web Workers
Un web worker est un fichier JavaScript externe qui s'exécute en arrière-plan, sans affecter les performances de la page.
Qu'est-ce qu'un Web Worker ?
Lors de l'exécution de scripts dans une page HTML, celle-ci devient non réactive jusqu'à ce que le script soit terminé.
Un web worker est un fichier JavaScript externe qui s'exécute en arrière-plan, indépendamment des autres scripts, sans affecter les performances de la page. Vous pouvez continuer à faire ce que vous voulez : cliquer, sélectionner des éléments, etc., pendant que le web worker s'exécute en arrière-plan.
Les web workers sont utiles pour exécuter du code lourd qui ne peut pas être traité sur le thread principal, sans provoquer de longues tâches qui rendent la page non réactive.
Support des navigateurs
Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'API des Web Workers.
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
Exemple d'API des Web Workers
L'exemple ci-dessous crée un simple web worker qui compte des nombres en arrière-plan :
Exemple
Remarque : Normalement, les web workers ne sont pas utilisés pour des scripts aussi simples, mais pour des tâches plus intensives en CPU !
Vérifier le support de l'API des Web Workers
Avant d'utiliser un web worker, nous pouvons rapidement vérifier le support du navigateur :
Exemple
Tester le support du navigateur :
<script>
const x = document.getElementById("result");
if(typeof(Worker) !== "undefined") {
x.innerHTML = "Votre navigateur prend en charge les Web Workers !";
} else {
x.innerHTML = "Désolé, votre navigateur ne prend pas en charge les Web Workers.";
}
</script> Créer un fichier Web Worker .js
Maintenant, créons un web worker dans un fichier JavaScript externe.
Ici, nous créons un script qui compte. Le script est stocké dans le fichier "demo_workers.js" :
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount(); Remarque : La partie importante du code ci-dessus est la méthode postMessage() - qui est utilisée pour envoyer des messages à la page HTML.
Créer un objet Web Worker
Une fois que nous avons créé le fichier web worker .js, nous pouvons l'appeler depuis une page HTML.
Les lignes suivantes vérifient si un worker (w) existe déjà ; sinon, elles créent un nouvel objet web worker et pointent vers le fichier .js : "demo_workers.js" :
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
} Ensuite, nous pouvons ENVOYER et RÉCUPÉRER des messages du web worker.
Les données sont envoyées entre les web workers et le thread principal via un système de messages : les deux côtés envoient leurs messages en utilisant la méthode postMessage() , et répondent aux messages via le gestionnaire d'événements onmessage .
Ajoutez un écouteur d'événements onmessage à l'objet web worker.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
}; Lorsque le web worker dans le .js envoie un message, le code à l'intérieur de l'écouteur d'événements est exécuté. Les données du web worker sont stockées dans event.data .
Terminer un Web Worker
Lorsqu'un objet web worker est créé, il continuera à écouter les messages jusqu'à ce qu'il soit terminé.
Pour terminer un objet web worker et libérer les ressources du navigateur/de l'ordinateur, utilisez la méthode terminate() :
w.terminate(); Réutiliser le Web Worker
Si vous définissez la variable du web worker sur undefined après qu'elle ait été terminée, vous pouvez réutiliser le worker/le code :
w = undefined; Exemple complet de Web Worker
Nous avons déjà vu le code du Web Worker dans le fichier .js.
Ci-dessous se trouve le code complet pour la page HTML :
Exemple
<!DOCTYPE html>
<html>
<body>
<p>Compter les nombres : <output id="result"></output></p>
<button onclick="startWorker()">Démarrer le Worker</button>
<button onclick="stopWorker()">Arrêter le Worker</button>
<script>
let w;
function startWorker() {
const x = document.getElementById("result");
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
x.innerHTML = event.data;
};
} else {
x.innerHTML = "Désolé ! Pas de support pour les Web Workers.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html> Web Workers et le DOM
Étant donné que les web workers se trouvent dans des fichiers .js externes, ils n'ont pas accès aux objets JavaScript suivants :
- L'objet window
- L'objet document
- L'objet parent