Maison  >  Article  >  interface Web  >  Explication détaillée du code des API HTML5-Web Worker

Explication détaillée du code des API HTML5-Web Worker

黄舟
黄舟original
2017-04-01 11:28:241572parcourir

1. Présentation
HTML5 Web Worker peut permettre aux programmes Javascript d'effectuer un grand nombre de tâches de calcul fastidieuses dans un seul thread en arrière-plan. Les Web Workers ne peuvent pas accéder directement au DOM lors de l'exécution. Les Web Workers consomment également des ressources CPU et système. La communication entre le Web Worker et la page peut se faire via les méthodes Web Worker postMessage et messageevent.

2. Le navigateur prend en charge la détection

 function loadDemo() 
   { 
      
if
 (typeof(Worker) !== "undefined") 
      { 
         
document
.getElementById("support").innerHTML =  
            "Excellent! Your browser supports HTML5 Web Workers"; 
      } 
   }

3. Objet travailleur
L'objet travailleur est un enfant de l'objet fenêtre<.> Objet, qui possède les méthodes suivantes : •Worker(jsFile_URL) : Constructeur, le paramètre est l'adresse URL d'un fichier JavaScript utilisé pour exécuter les tâches Web Worker, qui peut être une adresse relative ou absolue. Les travailleurs peuvent être créés de manière récursive. Appelé sur la page.
•terminate() : Termine le travailleur. Après la résiliation, il ne peut pas être réutilisé et ne peut être reconstruit.
Appelez sur la page.
•close() : Termine le travailleur, appelé dans le Worker.
•importScripts(jsFile_1_URL, jsFile_2_URL, ...) : l'importation asynchrone de fichiers JavaScript vers un travailleur existant. JavaScript est exécuté dans l'ordre des paramètres. Appelé dans le script Worker.
•postMessage(msg) : Créez une méthode de communication entre la page du travailleur et le travailleur, par exemple :

    // -------------由页面向worker
发送消息
------------------
      document.getElementById("helloButton").
onclick
 = function() { 
         worker.postMessage("Here&#39;s a message 
for
 you"); 
      }
      // -------------页面接收来自worker的消息----------------      
      worker.addEvent
List
ener("message", messageHan
dl
er, true); 
      function messageHandler(e) { 
         // process message from worker 
      } 
      // -------------JavaScript
文件处理
来自页面的消息----------------
      addEventListener("message", messageHandler, true);
      function messageHandler(e) { 
         postMessage("worker says: " + e.data + " too"); 
      }
4.

Gestion des erreurs

 // -------------在页面处理来自worker的消息----------------
   worker.addEventListener("error", errorHandler, true);
   function errorHandler(e) { 
      console.log(e.message, e); 
   }
5. Utiliser

Timer Bien que le travailleur ne puisse pas accéder directement aux objets dans le DOM, il peut utiliser pleinement les méthodes liées au temps et les
propriétés de l'objet fenêtre, certains autres attributs peuvent également être utilisés. Tels que :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn