HTML 5 Web Workers travail en arrière plan

Lors de l'exécution d’un scripts javascript dans une page HTML, la page devient insensible jusqu'à ce que le script soit terminé.
Un web worker est un JavaScript 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 : en cliquant, en sélectionnant les choses, etc., tandis que le travailleur du web s'exécute en arrière-plan.

Qui est ce que un Web Workers ?

HTML5 cours tutorial

Un Web Workers est un JavaScript en cours d'exécution en arrière-plan, sans affecter les performances de la page.

Lors de l'exécution de scripts dans une page HTML, la page ne répond pas jusqu'à ce que le script soit terminé, ou il est fréquent que nos appels serveurs dépassent le temps prévu, ce qui provoque une alerte du navigateur nous proposant "d'arrêter le script" comme le montre l'image suivante:

Web Workers

L’exemple suivant montre le message d’alerte émis par le navigateur.

Exemple faire un calcule avec javascript

Sélectionner le code

  <!DOCTYPE html>
  <html>
  <head>
    <title>HTML5  demo</title>
    <meta charset="UTF-8" />
  <script type="text/javascript">
      function calc(){
         
          var somme = 0;
          for (var i= 1; i < 10000; i++){
              for (var j=1; j<10000; j++){
                  for (var k=1;k<10000;k++){
                      somme += k+j+i;
          }}}
          document.getElementById("resultat").innerHTML = somme;
                 
      }
   
  </script>
  </head>
  <body>
      <input type="submit" onClick="calc();"
  value="Calculer"/><br/>
     Résultat = <input type="text" id="resultat">
  </body>
  </html>
 

Exécuter l’exemple, click sur le boutton calculer et attendez  quelques instants pour voir le résultat

Comme vous pouvez le voir sur la démonstration, le script se fait arrêter par le navigateur au bout de quelques secondes.

La solution proposée par HTML5 est simple: Un Web Workers, qui est un code JavaScript 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 : en cliquant, sélectionnant des choses, etc, alors que le Web Workers s'exécute en arrière-plan.


Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

Web Workers est pri en charge par tous les principaux navigateurs, sauf Internet Explorer.


HTML5 Exemple de Web Workers

Reprenons notre exemple et externaliser notre script en créant un Web Workers.
Externaliser veut dire mettre notre script dans un fichier javascript externe. Donc nous allons prendre notre fonction calc() et la mettre dans le fichier "calcule.js" que nous allons mettre dans le même répertoire que notre fichier html .

Voici le fichier "calcule.txt" à télécharger

L'exemple ci-dessous crée un Web Workers simple pour faire les calculess en arrière-plan :

Exemple

Sélectionner le code

  <!DOCTYPE html>
  <html>
  <head>
    <title>HTML5  demo</title>
    <meta charset="UTF-8" />
  <script type="text/javascript">
      function calc(){
         
          var w = new Worker('calcule.js'); 
          w.addEventListener('message', function(event) { 
               
              document.getElementById("resultat").innerHTML =
  event.data;
          }, false); 
           
          w.postMessage(""); // lance le worker.   
      }
  </script>
  </head>
  <body>
      <input type="submit" onClick="calc();"
  value="Calculer"/><br/>
    <p>Résultat = <span
  id="resultat"></span></p>
  </body>
  </html>
 

Vérifier le Support  Web Worker

Avant de créer un Web Workers, vérifier si le navigateur prend en charge le  Web Worker :

Sélectionner le code

  if(typeof(Worker)!=="undefined")
    {
    // Oui! Web worker est supporté!
    // votre code ici  code.....
    }
  else
    {
    // Désolé!  Web Worker n’est pas supporté..
  // Code alternatif si vous voulez.
    }
 

Créer un fichier Web

Maintenant, nous allons créer notre Web Workers dans un JavaScript externe.

Ici, nous créons un script qui calcule. Le script est stocké dans le fichier « calcule.js » :

Sélectionner le code

  self.onmessage = function(e) {
  var somme=0;
    for (var i= 1; i < 1000; i++){ 
   for (var j=1; j<1000; j++){
    for (var   k=1;k<1000;k++){
     somme += k+j+i;          
     }}}    
     self.postMessage(somme);
      };
 

La partie importante du code ci-dessus est la méthode postMessage() -  qui est utilisé pour poster les messages  de retour à la page HTML.

Remarque : Normalement les Web Workers ne servent pas pour ces scripts simples, mais pour les tâches intensives qui nécessitent plus de CPU.

créez un objet  Web Worker

Maintenant que nous avons le fichier  Web Worker, nous devons l’appeler à partir d'une page HTML.

Les lignes suivantes vérifie si le Worker existe déjà, sinon - il crée un nouvel objet  Web Worker et exécute le code dans fichier Worker « calcule.js » :

Sélectionner le code

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

Ainsi nous pourrons envoyer et recevoir des messages du  Web Worker.

Ajoutez un écouteur d'événement « onmessage » pour le  Web Worker.

Sélectionner le code

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

Lorsque le  Web Worker publie un message, le code au sein de l'écouteur d'événements est exécuté. Les données du  Web Worker sont stockées dans event.data.


Mettre fin à un Web Workers

Lorsqu'un objet  Web Worker est créé, il continuera d'écouter les messages (même après que le script externe est terminé) jusqu'à ce qu'elle soit terminée.

Pour terminer un Web Workers et libérer les ressources de l'ordinateur/navigateur, utilisez la méthode terminate() :

w.terminate();


Exemple de code complet popur Web Worker

Nous avons déjà vu le code du Worker dans le fichier .js. Voici le code pour la page HTML finale :

Exemple

Sélectionner le code

  <!DOCTYPE html>
  <html>
  <head>
    <title>HTML5  demo</title>
    <meta charset="UTF-8" />
  <script type="text/javascript">
      if(typeof(Worker)!=="undefined")
    {
   
              function calc(){
        var w;
                          if(typeof(w)=="undefined") {
   
          w = new Worker('calcule.js'); 
                          }
          w.addEventListener('message', function(event) { 
               
              document.getElementById("resultat").innerHTML =
  event.data;
          }, false); 
           
          w.postMessage(""); // lance le worker.   
      }
    }
  else
    {
    document.getElementById("resultat").innerHTML ="Désolé!  Web
  Worker n’est pas supporté..";
  // ou un code alternatif si vous voulez.
    }
   
  </script>
   
  </head>
  <body>
      <input type="submit" onClick="calc();"
  value="Calculer"/><br/>
    <p>Résultat = <span
  id="resultat"></span></p>
  </body>
  </html>
 

Web Workers et le modèle DOM

Étant donné que les Web Workers sont dans des fichiers externes, ils n'ont pas accès aux objets JavaScript suivants :

  • L'objet window
  • L'objet document
  • L'objet parent
Par carabde 10 juin 2014

chapitre précédent

sommaire