Web Workers HTML

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

Qu'est-ce que le 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é.

Le 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., et à ce moment-là, le web worker fonctionne 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 de Web Workers HTML

L'exemple suivant crée un simple web worker 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 cela :

if (typeof(Worker) !== "undefined") {
    // Oui ! Le Web worker est pris en charge !
    // Quelques codes.....
}
    // 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.

À cet endroit, 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 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 consommatrices de ressources 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 l'écouteur d'événements. Les données provenant du web worker sont stockées dans event.data.

Arrêter 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 arrêté.

Pour arrêter 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 fermeture :

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 Worker</button> 
<button onclick="stopWorker()">Arrêter 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 de Web Worker.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Essayez-le vous-même

Web Worker et DOM

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

  • Objet window
  • Objet document
  • Objet parent