Travailleurs Web HTML 5

Web Worker exécute JavaScript en arrière-plan et n'affectera pas les performances de la page.

Qu'est-ce qu'un Web Worker ?

Lors de l'exécution d'un script dans une page HTML, l'état de la page ne répond pas jusqu'à ce que le script soit terminé.

Web Worker est un JavaScript exécuté en arrière-plan, indépendant des autres scripts et n'affectera pas les performances de la page. Vous pouvez continuer à faire ce que vous voulez : cliquer, sélectionner, etc. pendant que le Web Worker s'exécute en arrière-plan.

Prise en charge des navigateurs

Les Web Workers sont pris en charge par tous les principaux navigateurs, à l'exception d'Internet Explorer.

Instance HTML5 Web Workers

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

Comptage :

Détecter la prise en charge de Web Worker

Avant de créer un Web Worker, veuillez vérifier si le navigateur de l'utilisateur le prend en charge :

iif(typeof(Worker)!=="undefined")
  {
  // Yes! Web worker support!
  // Some code.....
  }
else
  {
  // Sorry! No Web Worker support..
  }

Créer un fichier Web Worker

Maintenant, créons notre travailleur Web dans un JavaScript externe.

Ici, nous créons le 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, nous devons maintenant l'appeler depuis la page HTML.

Le code suivant détecte si le travailleur existe, sinon - il crée un nouvel objet Web Worker puis exécute le code dans "demo_workers.js" :

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

Ensuite, nous pouvons maintenant envoyer et recevoir des messages du travailleur Web.

Ajouter un écouteur d'événement "onmessage" au Web Worker :

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

Lorsque le Web Worker délivre un message, le code dans l'écouteur d'événement est exécuté. event.data contient des données de event.data.

Terminer le Web Worker

Lorsque nous créons l'objet Web Worker, il continuera à écouter les messages (même une fois le script externe terminé) jusqu'à ce qu'il soit terminé.

Pour terminer le Web Worker et libérer les ressources du navigateur/ordinateur, veuillez utiliser la méthode terminate() :

w.terminate();

Exemple de code complet du Web Worker

Nous avons vu le Code de travail dans le fichier .js. Voici le code de la page HTML :

Instance

   
Count numbers: 
 Start Worker
 Stop Worker 

 <script> var w; function startWorker() { 
 if(typeof(Worker)!=="undefined") { if(typeof(w)==&quot;undefined&quot;) { w=new Worker(&quot;demo_workers.js&quot;); } 
 w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } 
 else 
 { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } 
 } 
 function stopWorker() { w.terminate(); } 
 </script> 
 
  

Web Workers et DOM

Les Web Workers étant dans des fichiers externes, ils ne peuvent pas accéder au JavaScript suivant objets :

objet fenêtre

objet document

objet parent

Ce qui précède est le contenu de HTML 5 Web Workers Pour plus de contenu connexe, veuillez payer. attention au site PHP chinois (www.php.cn) !