HTML5 Web Workers

Un web worker est du JavaScript s'exécutant en arrière-plan, sans affecter les performances de la page.

Qu'est-ce qu'un Web Worker ?

Lorsqu'un script s'exécute dans une page HTML, la page ne répond pas tant que le script n'est pas terminé.

Un web worker est du JavaScript s'exécutant 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 du contenu, etc., pendant que le web worker s'exécute en arrière-plan.

Prise en charge des navigateurs

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari et Opera prennent tous en charge les Web Workers.

Exemple de Web Workers HTML5

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

Exemple

Compteur :




Essayez-le vous-même »

Code du fichier demo_workers.js

var i=0;

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

timedCount();

Vérifier si le navigateur prend en charge les Web Workers

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

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代码.....
}
else
{
    //抱歉! Web Worker 不支持
}

Créer un fichier web worker

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

Ici, nous créons un script de comptage. Le 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 à la page HTML.

Remarque :Les web workers ne sont généralement pas utilisés pour des scripts aussi simples, mais pour des tâches plus gourmandes en CPU.

Créer un objet Web Worker

Nous avons déjà le fichier web worker, et maintenant nous devons l'appeler depuis une page HTML.

Le code suivant détecte si le worker existe ; si ce n'est pas le cas, il crée un nouvel objet web worker et exécute le code dans "demo_workers.js" :

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

Ensuite, nous pouvons envoyer et recevoir des messages depuis le web worker.

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

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

Arrêter un Web Worker

Lorsque nous créons un objet 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 un Web Worker et libérer les ressources du navigateur/de l'ordinateur, utilisez la méthode terminate() :

w.terminate();

Exemple complet de code Web Worker

Nous avons déjà vu le code Worker dans le fichier .js. Ci-dessous se trouve le code de la page HTML :

Exemple

<!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <title>Tutoriel d'exemple (example.com)</title>  </head> <body> <p>Compteur :<output id="result"></output></p> <button onclick="startWorker()">Commencer le travail</button> <button onclick="stopWorker()">Arrêter le travail</button> <p><strong>Remarque :</strong>Internet Explorer 9 et les versions IE antérieures ne prennent pas en charge les Web Workers.</p> <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; }; } else { document.getElementById("result").innerHTML = "Désolé, votre navigateur ne prend pas en charge les Web Workers..."; } } function stopWorker() { w.terminate(); w = undefined; }
</script> </body> </html>

Essayez-le vous-même »

Web Workers et DOM

Étant donné que les web workers sont dans des fichiers externes, ils ne peuvent pas accéder aux objets JavaScript suivants :

  • objet window
  • objet document
  • objet parent
Autres extensions