HTML Web Workers

Un web worker est un JavaScript exécuté en arrière-plan, sans affecter les performances de la page.

Qu'est-ce qu'un Web Worker ?

Lorsque vous exécutez un script dans une page HTML, la page n'est pas réactive jusqu'à ce que le script soit terminé.

Un web worker est un JavaScript exécuté en arrière-plan, indépendant des autres scripts, sans affecter les performances de la page. Vous pouvez continuer à faire ce que vous voulez : cliquer, sélectionner du contenu, etc., pendant que le web worker s'exécute en arrière-plan.

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge pleinement le Web Worker.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

Exemple d'HTML Web Workers

L'exemple suivant crée un web worker simple qui compte en arrière-plan :

Compte :

Essayez-le vous-même

Vérification de la prise en charge du Web Worker

Avant de créer un web worker, veuillez vérifier si le navigateur de l'utilisateur prend en charge cette fonctionnalité :

if (typeof(Worker) !== "undefined") {
    // Oui ! Le Web worker est pris en charge !
    // Quelques lignes de code.....
}
    // Désolé ! Le Web Worker n'est pas pris en charge !
}

Créer un fichier Web Worker

Maintenant, créons notre web worker dans un fichier JavaScript externe.

Ici, nous créons le script de comptage. Ce script est stocké dans le fichier "demo_workers.js" :

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

La partie importante du code ci-dessus est la méthode postMessage() - elle est utilisée pour renvoyer un message vers la page HTML.

Commentaires : Le web worker n'est généralement pas utilisé pour des scripts aussi simples, mais pour des tâches plus gourmandes en CPU.

Créer un objet Web Worker

Nous avons maintenant le fichier web worker, nous devons l'appeler depuis la page HTML.

La ligne de code suivante vérifie l'existence du worker. S'il n'existe pas, il crée un nouveau objet web worker et exécute le code du fichier "demo_workers.js" :

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

Nous pouvons alors recevoir des messages du web worker.

Ajoutez un écouteur d'événement "onmessage" au web worker :

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

Lorsque le web worker envoie un message, il exécute le code dans le gestionnaire d'événements. Les données provenant du web worker sont stockées dans event.data.

Terminer le Web Worker

Après la création d'un web worker, il continue d'écouter les messages (même après la fin du script externe) jusqu'à ce qu'il soit terminé.

Pour terminer le web worker et libérer les ressources du navigateur/ordinateur, utilisez la méthode terminate() :

w.terminate();

Réutilisation du Web Worker

Si vous définissez la variable worker sur undefined, vous pouvez réutiliser ce code après sa termination :

w = undefined;

Code complet de l'exemple Web Worker

Nous avons vu le code Worker dans le fichier .js. Voici le code de 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>
<br><br>
<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    }
        document.getElementById("result").innerHTML = "Désolé ! Aucun support pour Web Worker.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Essayez-le vous-même

Web Worker et DOM

Les web workers situés dans des fichiers externes ne peuvent pas accéder aux objets JavaScript suivants :

  • Objet window
  • Objet document
  • Objet parent