HTML5 Web Workers_Motor Node Java College

Un travailleur Web dédié (travailleur Web dédié) fournit un moyen simple de permettre au contenu Web d'exécuter le script en arrière-plan. Une fois le travailleur créé, il peut transmettre le message à la fonction de surveillance des événements spécifiée par son créateur, de sorte que toutes les tâches générées par le travailleur recevront ces messages. Le fil de travail peut effectuer des tâches sans interférence interférence. De plus, il peut également utiliser XMLHTTPRequest (bien que les deux valeurs d'attribut de réponsexml et canal soient toujours nulles) pour effectuer des opérations d'E / S. Cet article fournit des exemples et des détails pour constituer les documents précédents. La fonction fournie au travailleur répertorie les fonctions soutenues par le travailleur.

L'interface de travail générera un fil de niveau de fonctionnement réel. Cependant, pour les travailleurs du Web, les points de communication avec d'autres threads seront soigneusement contrôlés, ce qui signifie qu'il vous est difficile de provoquer des complications. Vous n'avez aucun moyen d'accéder à des composants de sécurité ou à des DOM non glacés. Donc, si vous ne dépensez pas d'efforts, vous ne pouvez pas faire d'erreurs. Générer des travailleurs

Il est très simple de créer un nouveau travailleur. Tout ce que vous avez à faire est d'appeler le constructeur Worker () et de spécifier un URI qui doit exécuter un script qui s'exécute dans le fil du travailleur. Fonction de traitement d'événements spécifique.

 var myworker = new Worker (my_task.js);

Ou, vous pouvez également utiliser addEventListener ():

 var myworker = nouveau travailleur (my_task.js); Le travailleur.

La première ligne de l'exemple crée un nouveau fil de travail. Le troisième acte définit la fonction de surveillance de l'événement de message. Lorsque le travailleur appelle sa propre fonction postMessage (), cette fonction de traitement d'événements est appelée. Enfin, le fil du travailleur a été lancé dans la septième ligne. Remarque: L'URI du paramètre qui transmet le constructeur des travailleurs doit suivre la stratégie homologue. À l'heure actuelle, différents fabricants de navigateurs sont toujours différents sur lesquels URIS devraient suivre les stratégies homologues; Blob Uri.

Les données transmises entre la page d'accueil et le travailleur sont copiées, et non partagées. L'objet transmis au travailleur doit être sérialisé, puis l'extrémité suivante doit être sérialisée. La page ne partage pas le même exemple que le travailleur. La plupart des navigateurs utilisent une copie structurée pour réaliser cette fonctionnalité.

Avant de descendre, dans le but d'enseigner, créons une fonction appelée ElatingMessage ().

 Fonction EmulatMessage (VVAL) {return eval; Boolean // Test # 3v # 3v AR Exemple3 = Nouvelle chaîne (Hello World); , Âge: 43}; alerte (typeof example); VAR EXEMPLE5 = Nouveau animal (Cat, 3); alerte (Exemple5

La valeur qui n'est pas partagée est appelée message. Parlons du travailleur, vous pouvez utiliser PostMessage () pour transmettre le message au fil principal ou le renvoyer du fil principal. L'attribut de données de l'événement de message contient des données du travailleur.

 var myworker = nouveau travailleur (my_task.js); ;

Remarque: D'une manière générale, les fils d'arrière-plan - y compris le travailleur-travailleur pour faire fonctionner DOM. Si le thread d'arrière-plan doit modifier le DOM, il doit envoyer le message à son fondateur afin que le créateur termine ces opérations.

Comme vous pouvez le voir, le message transmis entre le travailleur et la page d'accueil est toujours "Message JSON", même s'il s'agit d'un type de valeur d'origine. Par conséquent, vous pouvez transmettre des données JSON et / ou tout type de données qui peut sérialiser:

 PostMessage ({cmd: init, horodat: date.now ()});

Exemples pour passer des données

Exemple n ° 1: Créez un "EVALCHRONE ASynchrone ()" commun "

L'exemple suivant introduit comment utiliser eval () dans le travailleur pour exécuter tout type de code javascript dans tout type d'Asynchrone dans l'ordre ::

 // Syntaxe: asyceval (code [, listner]) var asynceval = (function () {var ALISTERNE = [], oparser = new Worker (data: text / javascrip % 20% 28Oevent% 29% 20% 7b% 0a% 09postmessage% 28% 7b% 09% 09% 22id% 22% 20Oevent.data% 2c% 09% 22evaluate% 22% 3a 3a 3a 3a 3a 3a 3a 3a 3a 3a% 20EVAL% 28OEVENT.DATA.CODE% 29% 0A% 09% 7D% 29% 3B% 0A% 7D); data.id] (eevent.data.évalué);} supprime les alilisteners [eevent.data.id];}; : ALISTENERS.LENGTH -1, CODE: SCODE});};});

Exemple d'utilisation:

 // Message d'alerte asynchrone ... asynceval (3 + 2, fonction (smessage) {alert (3 + 2 = + smessage); // imprime asynchrone ... asynceval (// bonjour world !!! / ,,, fonction (Shtml) {document.body.appendChild (document.CreateTextNode (shtml);}); .Open (/ get /, /http://www.mozilla.org//, false); / n / toreq.send (null); / n / treturn oreq.ResponSext; / n}););); );));));));););))););););));)));))););));)););

Exemple n ° 2: transférer la méthode avancée de JSON et créer un système d'échange

Si vous devez transmettre des données très compliquées et que vous devez appeler plusieurs méthodes sur la page d'accueil et le travailleur en même temps, vous pouvez envisager de créer un système similaire à ce qui suit.

 <! Argument pour passer 1, argument pour passer 2, etc., etc.): appelle une fonction requêtenable d'un travailleur * PostMessage (données de chaîne ou JSON): voir Worker.protodype. function): Ajoute un écouteur * reposIListERner (name): supprime un écouteur Instances Queeryker Properties: * defaultListListener: le londitera par défaut Executem unique Oinstance = this, oworCer = new Worker (Surl), olistener = {}; .Data.HasownProperty (rnb93qh) {oListenners [eevent.data.vo42t30] .Apply (oecent.data.rnb99 3qh);} else {this.defaultListener.call (Oinstance), Oevent.Data);}}; {owster.onerror = fonerror;} this.sendQuery = fonction (/ * Nom de la fonction remerciable, argument pour passer 1, argument pour passer 2, 2, 2, etc. etc. etc * /) {if (arguments.length <1) { Jetez un nouveau Typerror (requêtenable = Fonction (VMSG) {// Je pense simplement qu'il n'est pas nécessaire d'utiliser Call () que diriez-vous simplement de (vmsg); prototy wearch.prototype.postMessage.call (oworker, vmsg); ] = FListener;}; ] * /); ); A id = firstlink href = javascript: omytask.sendQuery ('getDifferent', 5, 3);> Quelle est la différence entre 5 et 3? omytask.sendQuery ('Witsomething'); ) {// faire quelque chose} funct} funct ion myprivatefunc2 () {// faire quelque chose} // etc. etc.// vos fonctions publiques personnalisées (c'est-à-dire interrogées à partir de la page principale) Obtenez la différence Bet ween Two nightrs: getDifférence: function (nminund, nSubtrahend) {Reply (impridsomething, nminuend -nsubtrahend);}, // Exemple # 2: attendre trois secondes à WaitSometh tsomething, 3, sexe);}, 3000);}}; (/ * Nom de l'écouteur, argument pour passer 1, argument pour passer 2, etc. etc. : Arguments [0], rnb93qh: array.prototype.slice .call (arguments, 1)});} onMessage = function (oevent) {if (eevent.data instanceof objet && sewproperty) && daeenproprit (bk4e1h0) .haswproperty (ktp3fm1)) {QueryableFunction [eevent.data .bk4e1h0] .apply (self, oevent.data.ktp3fm1);} else {defaultQuery (eevent.data);}};

Il s'agit d'une méthode très appropriée pour changer les nouvelles entre la page d'accueil-travailleur - ou l'opposé, l'opposé, l'opposé.

Transférer les données en transférant la propriété (objet transférable)

Google Chrome 17 et Firefox 18 incluent une autre méthode avec une performance plus élevée pour passer le type spécifique d'objet (objet transférable) à un travailleur / dos du travailleur. L'objet de transfert est transféré d'un contexte à un autre contexte sans aucune opération de copie. Cela signifie qu'il obtiendra une grande amélioration des performances lors du passage du Big Data. Si vous venez du monde C / C ++, imaginez-le comme une transmission selon la référence. Cependant, contrairement à la transmission en fonction de la référence, une fois l'objet transféré, la version que le contexte d'origine n'existera plus. La propriété de l'objet est transférée au nouveau contexte. Par exemple, lorsque vous transférez un objet ArrayBuffer de la demande principale au travailleur, le ArrayBuffer d'origine est effacé et ne peut pas être utilisé. Le contenu qu'il contient (complet) sera transmis au contexte du travailleur.

 // Créez un fichier de 32mb et remplissez-le.var uint8Array = new uint8aray (1024 * 1024 * 32); ;

Si nécessaire, le travailleur peut générer plus de travailleurs. C'est ce qu'on appelle le subwork, qui doit héberger dans la même source que la page parent. De la même manière, Subiwer analyse l'adresse de l'URI plutôt que sa propre page au lieu de sa propre page. Cela fait que les travailleurs surveillent facilement leur dépendance. Chrome ne prend pas en charge le subwork.

Il n'y a actuellement aucune méthode "officielle" qui peut intégrer le code de travail dans une page Web comme les éléments <cript>. Mais si un élément <cript> n'a pas de caractéristiques SRC et que ses caractéristiques de type ne sont pas spécifiées en tant que type MIME en cours, elles seront considérées comme un élément de bloc de données et peuvent être utilisées par JavaScript. "Data Block" est une caractéristique très courante dans HTML5, qui peut transporter presque tous les types de données de type de texte. Par conséquent, vous pouvez intégrer un travailleur de la manière suivante:

 <! Analyse du moteur, car son type mime est un travail de texte / JS. Var myvar = bonjour world!; </ script> <script type = text / javascript> // Le script sera analysé par le moteur JS car son type mime est text / javascript. Fonction Pagelog (SMSG) {// Utiliser Fragment: De cette façon, le navigateur ne fera que rendu / arrière. var ofragm = document.CreatEdOcumentFragment (); -Workr> // Ce script ne sera pas analysé par le moteur JS car son type MIME est Text / JS-Worker. onMessage = function (oevent) {postMessage (myvar);}; </ script> <script type = text / javascript> // Le script sera analysé par le moteur JS car son type mime est text / javascript. // Dans le passé ...: // nous utilisons Blob Builder // ... mais maintenant nous utilisons Blob ...: var blob = new Blob (array.prototype.map.call (documens.quelyselectorary (script [type = = / text // js- workr /], fonction (oscript) {return oscript.textContent;}), {type: text / javascript}); . Document.Worker = New Working (Window () {Document.Worker.PostMessage ();};

Maintenant, le travailleur intégré a été mis dans une propriété de document personnalisée.

Le travailleur peut utiliser le délai d'attente et l'intervalle comme le fil principal. Cela sera très utile, par exemple, si vous voulez que le fil de travail du travailleur soit périodiquement sans code exécutif ininterrompu.

Si vous souhaitez mettre fin à un travailleur immédiatement, vous pouvez appeler la méthode Termine () du travailleur ::

 Myworker.terniate ();

Le fil du travailleur sera tué immédiatement et ne laissera aucune occasion de le laisser terminer ses propres travaux d'exploitation ou de nettoyage.

Les travailleurs peuvent également appeler votre propre méthode nsiworkerscope.close () pour vous fermer:

 self.close ();

Lorsque le travailleur est des erreurs d'exécution, sa fonction de traitement des événements onerror est appelée. Il reçoit un événement qui met en œuvre l'erreur d'errorevent du nom de l'interface. L'incident ne bouillonnera pas et peut être annulé; L'événement d'erreur a les trois champs suivants qui sont intéressés par:

Messages d'erreur lisibles.

Nom du fichier de script d'erreur.

Le numéro de ligne du fichier de script lorsqu'une erreur se produit.

Les travailleurs peuvent accéder aux objets Navigator dans sa portée. Il contient la chaîne suivante qui peut reconnaître le navigateur, comme le faisant dans des scripts ordinaires:

• Nom
• IAppversion
• Platform
• Tuserager

Le thread de travailleur peut accéder à une fonction globale, ImportScripts (), qui permet au travailleur d'introduire le script ou la bibliothèque dans sa propre portée. Vous pouvez introduire l'uri sans passer les paramètres, ou à l'URI de plusieurs scripts;

 ImportScripts (); * /

Le navigateur charge et exécute le script. Les objets globaux de chaque script peuvent être utilisés par le travailleur. Si le script ne peut pas être chargé, l'exception Network_error sera lancée et le prochain code ne sera pas exécuté. Le code précédemment exécuté (y compris le code exécuté à l'aide de Window.SetTimeout ()) peut toujours être utilisé. La déclaration de fonction après importation () peut toujours être utilisée car elles s'exécutent toujours avant un autre code. Remarque: L'ordre de téléchargement du script n'est pas corrigé, mais l'ordre sera transmis dans les importations () () lors de l'exécution. Ceci est terminé simultanément;

Cette section fournit plusieurs exemples d'utilisation du travailleur DOM.

Exécuter des opérations en arrière-plan

L'un des avantages du travailleur est qu'il peut exécuter le fonctionnement dense du processeur sans bloquer le thread d'interface utilisateur. Dans l'exemple suivant, le travailleur est utilisé pour calculer Fibona.

Code javascript

Le code JavaScript suivant est stocké dans le fichier "fibonacci.js", qui est associé au fichier html dans la section suivante.

 Var Résultats = []; Fonction ResulTreceiver (Event) {ResultS.Push (PARSEInt (Event.Data)); fonction errorReceiver (event) {throw event.data;} onMessage = fonction (événement) {var n = parseInt (event.data); } Pour (var i = 1; i <= 2; i ++) {var worker = new Worker (fibonacci.js);

Le travailleur définit l'attribut OnMessage à une fonction. (Notez que cette utilisation n'est pas la même chose que la définition d'une variable globale avec le même nom, ou une fonction du même nom. le message envoyé par la page Web.) Cela permettra la récursivité et générera votre nouvelle copie pour traiter chaque cycle de calcul.

Code html

 <! = nouveau travailleur (fibonacci.js); = fonction (erreur) {Dump (Erreur de travail: + Error.Message + / N);

La page Web crée un élément div, l'ID est le résultat, l'utilisant pour afficher le résultat de calcul, puis générer un travailleur. Après avoir généré un travailleur, la fonction de traitement OnMessage est configurée pour afficher les résultats de calcul en définissant le contenu de l'élément DIV, puis la fonction de traitement ONERROR est définie sur les informations d'erreur de stockage. Enfin, envoyez un message au travailleur pour le démarrer.