API Worker Web

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 est inerte avant que le script ne 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., tandis que le web worker fonctionne en arrière-plan.

Support du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge pleinement les Web Workers :

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
Janvier 2010 Septembre 2012 Juin 2009 Juin 2009 Juin 2011

Instance de Web Worker

L'exemple suivant crée un Web Worker simple qui calcule des nombres en arrière-plan :

Exemple

Compte :

Essayez-le vous-même

Vérifiez le navigateur Web Worker

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

if (typeof(Worker) !== "undefined") {
  // Oui ! Support de Web worker !
  // Quelques codes.....
} else {
  // Désolé ! Aucun support de Web Worker..
}

Créer un fichier Web Worker

Maintenant, créons notre Web Worker en JavaScript externe.

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

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

La partie importante du code précédent est postMessage() Méthode - Utilisée pour envoyer un message à la page HTML.

Remarque :Les web workers ne sont généralement pas utilisés pour ce type de script simple, mais pour des tâches CPU-intenses.

Créer l'objet Web Worker

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

Les lignes de code suivantes vérifient si le worker existe, s'il n'existe pas, il crée un nouveau objet web worker et exécute le code de "demo_workers.js" :

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

Ensuite, nous pouvons envoyer et 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 publie un message, le code de l'écouteur d'événement est exécuté. Les données provenant du Web Worker sont stockées dans event.data.

Terminer Web Worker

Lorsque l'objet web worker est créé, 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 / de l'ordinateur, utilisez terminate() Méthode :

w.terminate();

Réutiliser Web Worker

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

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 travailleur</button>
<button onclick="stopWorker()">Arrêter Worker</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

Essayez-le vous-même

Web Worker et DOM

Étant donné que les Web Workers se trouvent dans des fichiers externes, ils ne peuvent pas accéder aux objets JavaScript suivants :

  • Objet window
  • Objet document
  • Objet parent