Commentaire: Web Workers est une nouvelle technologie ajoutée dans HTML5 pour implémenter le traitement backend dans les applications Web.
Les travailleurs Web sont une nouvelle technologie ajoutée dans HTML5 pour implémenter un traitement d'arrière-plan dans les applications Web.
Dans HTML4, les programmes créés par JS sont tous uniques. Si cela prend beaucoup de temps, l'interface Web ne répondra pas pendant longtemps. Dans le pire des cas, une boîte d'invite de script apparaîtra:
Cela invite le script trop longtemps, s'il faut continuer. . . . Ainsi, le protagoniste de cet article est présenté: API des travailleurs Web
L'utilisation de ces utilisateurs d'API peut facilement créer des threads en cours d'exécution, et il est très simple de créer des programmes d'arrière-plan:
var worker = nouveau travailleur ('*. js');
Remarque: les threads d'arrière-plan ne peuvent pas accéder aux pages ou aux objets de fenêtre.
Les données peuvent être transmises avec des threads d'arrière-plan en envoyant des messages et en recevant des messages:
working.onMessage = function (e) {};
working.postMessage = function (e) {};
Parlons de résumer:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<Title> </Title>
<script type = "text / javascript">
fonction calcul () {
var num = 10000000000;
var r = 0;
pour (var i = 1; i <num; i ++) {
r + = i;
}
alerte (r);
}
calculer();
</cript>
</ head>
<body>
</docy>
</html>
Donc ma belle monture a été donnée. . . Mais l'utilisation des travailleurs du Web ne le fera pas:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<Title> </Title>
<script type = "text / javascript">
Var Worker = New Worker ('C.JS');
wearch.onMessage = fonction (e) {
alert ('et:' + e.data);
};
fonction calcul () {
var num = 1000000;
wearch.PostMessage (NUM);
}
calculer();
</cript>
</ head>
<body>
</docy>
</html>
onMessage = fonction (e) {
var num = e.data;
var r = 0;
pour (var i = 1; i <num; i ++) {
r + = i;
}
postmessage (R);
}
Parfois, je pense, pourquoi calcule-je un si grand nombre si je n'ai rien à faire. . . . . Bien sûr, c'est une astuce ennuyeuse, mais je pense qu'il y a un scénario qui peut nécessiter cela.
Lorsque j'apprenais l'API du fichier plus tôt, il y avait une opération pour lire les fichiers locaux. Si le fichier est trop grand, ce sera très lent. Je me demande si cela peut être appliqué? Il est nécessaire de l'essayer pendant la deuxième étude.
Interagir les données avec les threads
Nous remplissons une fonction ici, générons au hasard un tableau au premier plan, puis revenons au premier plan pour imprimer en arrière-plan si le calcul peut être de 3 sur 3:
Programme principal
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<Title> </Title>
<style>
portée
{
rembourrage: 10px;
}
</ style>
<script src = "../ jQuery-1.7.1.js" type = "text / javascript"> </ script>
<script type = "text / javascript">
$ (document) .ready (function () {
var worker = nouveau travailleur ('t1.js');
wearch.postMessage ('');
wearch.onMessage = fonction (e) {
var arr = e.data.split (';');
pour (var i = 0, len = arr.length; i <len; i ++) {
var dom = $ ('<span>' + arr [i] + '</span>');
$ ('# body'). Ajouter (DOM);
}
}
});
</cript>
</ head>
<body>
<div>
</div>
</docy>
</html>
Le programme qui génère un tableau
onMessage = fonction (e) {
var arr = [];
pour (var i = 0; i <100; i ++) {
arr.push (parseInt (math.random () * 100));
}
var worker = nouveau travailleur ('t2.js');
wearch.PostMessage (JSON.Stringify (ARR));
wearch.onMessage = fonction (e) {
// renvoie les résultats de sélection à la réception
postmessage (e.data);
};
}
Déterminez si toutes les données dans le tableau sont divisées par 3
onMessage = fonction (e) {
var arr = JSON.Parse (E.Data);
var str = '';
pour (var i = 0, len = arr.length; i <len; i ++) {
if (parseInt (arr [i])% 3 == 0) {
if (str! = '') str + = ';';
str + = arr [i];
}
}
postmessage (STR);
fermer();
};
Description de la logique du programme:
Une nidification de fil est utilisée ici
Tout d'abord, exécutez le programme de premier plan, où un fil d'enfant T1 est initialisé pour initialiser 100 tableaux.
Ensuite, le thread de l'enfant T1 initialise le thread de l'enfant T2 (utilisé pour traverser le tableau, éliminer les nombres qui peuvent être divisibles par 3 et former une chaîne), et T1 passe les données du tableau à T2
T2 reçoit des données T1, et après le calcul, il transférera la chaîne vers T1, T1 vers la réception, et la réception exécutera sa propre logique
Processus se termine
Conclusion
En termes simples, je déclare le fil d'enfant ici, puis envoie des données à l'enfant postmessage, puis en attente le résultat.
Il semble que combiné avec les dernières prises Web de l'API de communication, deux puissent être combinées dans un programme de chat Web, et même certaines bases de données locales de stockage / local peuvent être utilisées.
Cela peut être une bonne chose.