Maison  >  Article  >  interface Web  >  Le site Web HTML5 Web Workers peut également être implémenté avec des compétences de didacticiel multi-threading_html5

Le site Web HTML5 Web Workers peut également être implémenté avec des compétences de didacticiel multi-threading_html5

WBOY
WBOYoriginal
2016-05-16 15:49:311630parcourir

Les Web Workers sont nouveaux dans HTML5 et sont une technologie utilisée pour implémenter le traitement en arrière-plan dans les applications Web

En HTML4, les programmes créés par js sont tous monothread. Si cela prend du temps, l'interface Web ne répondra pas pendant un certain temps. Dans le pire des cas, une boîte de dialogue d'invite de script apparaîtra :

Indique que l'exécution du script prend trop de temps. Voulez-vous continuer ? . . . Cela nous amène au protagoniste de cet article : API Web Workers

En utilisant cette API, les utilisateurs peuvent facilement créer des threads exécutés en arrière-plan. Pour créer un programme en arrière-plan, c'est très simple :

Copier le code<.>Le code est le suivant :
var worker = new Worker('*.js');
Remarque : le thread d'arrière-plan ne peut pas accéder à l'objet page ou fenêtre
Il peut être envoyé par messages et recevoir des messages et transmettre des données avec des fils d'arrière-plan :
worker.onmessage = function (e) {};
worker.postMessage = function (e) {};

S'il vous plaît dites-moi Et :


Copiez le codeLe code est le suivant :



< ;/title><br> <script type ="text/javascript"><br> function calculate() {<br> var num = 10000000000;<br> var r = 0;<br> for (var i = 1; je < num; je ) { <br /> r = je;<br /> }<br /> alerte(r);<br /> }<br /> calculer();<br /> </script><br> </head><br> < ;body><br> </body><br> </html><br><br> </div> <br><br><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415483316.jpg"> C'est ainsi que ma belle monture est sortie. . . Mais utiliser Web Worker ne permettra pas : <p><br><br></p> <div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode69'));">Copier le code<u></u></span>Le code est le suivant :</div></div> <div class="msgborder" id="phpcode69">< ;!DOCTYPE html><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <title></ title><br> <script type="text/javascript"><br> var travailleur = new Worker('c.js');<br> travailleur.onmessage = function (e) {<br> alert( 'et : ' e.data);<br> };<br> function calculate() {<br> var num = 1000000;<br> worker.postMessage(num);<br> }<br> calculate() ;<br> </script><br> </head><br> <body><br> </body><br> </html><br><br> </div> <br><br><div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode70'));">Copier le code<u></u></span>Le code est le suivant :</div></div> <div class="msgborder" id="phpcode70">onmessage = function(e) {<br> var num = e.data ;<br> var r = 0;<br> for (var i = 1; i < num; i ) {<br> r = i;<br> }<br> postMessage(r );<br>} <br><br> </div> <p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415483317.jpg"> </p>Je me demande parfois pourquoi je calcule des chiffres aussi gros alors que je n'ai rien à faire ? . . . . Bien sûr, c'est un gadget ennuyeux, mais j'ai pensé qu'il y avait un scénario qui pourrait le justifier. <p> </p>Lorsque j'apprenais l'API de fichier plus tôt, il y avait une opération pour lire les fichiers locaux. Si le fichier est trop volumineux, il sera très lent. Il est nécessaire de l'essayer lors du deuxième apprentissage. <p> </p> <p>Interagir des données avec les fils de discussion <strong></strong> </p>On complète ici une fonction, on génère aléatoirement un tableau au premier plan, puis on calcule en arrière-plan qu'il peut être divisé en 3 et on revient au premier plan pour l'impression : <p><br><br></p> <div class="msgheader"> <div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode71'));">Copier le code<u></u></span>Le code est le suivant :</div> <div class="msgborder" id="phpcode71"> <br>主程序 <br> <!DOCTYPE html><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <title>

< script src="../jquery-1.7.1.js" type="text/javascript">









复制代码
代码如下:

生成数组的程序
onmessage = function (e) {
var arr = [];
for (var i = 0; i < 100; i ) {
arr.push(parseInt(Math.random() * 100));
}

var worker = new Worker( 't2.js');
travailleur.postMessage(JSON.stringify(arr));
travailleur.onmessage = function (e) {
//把挑选结果发回前台
postMessage( e.data);
};
}


复制代码
代码如下:

判断数组所有数据是否被3整除
onmessage = function (e) {
var arr = JSON.parse(e.data);
var str = '';
for (var i = 0, len = arr.length; i < len; i ) {
if (parseInt(arr[i]) % 3 == 0) {
if (str != '') str = ';';
str = arr[i];
}
}
postMessage(str);
close();

};

程序逻辑描述:

这里用了个线程嵌套

首先执行前台程序,这里初始化了一个子线程"t1"用于将100个数组初始化

T1将数组数据传给t2

t2 接收t1数据,计算后将将字符串转给t1,t1转给前台,前台执行自己的逻辑

流程结束

结语

简单来说,我这里就是声明子线程,然后发送数据给子线postMessage,然后等待结果皆可。
API Web Sockets /本地数据库一些东西用到。

这个样子可能是个不错的东西。

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
Article précédent:Basé sur HTML5 Canvas : explication détaillée des chaînes, des chemins, des arrière-plans et des compétences du didacticiel pictures_html5Article suivant:Basé sur HTML5 Canvas : explication détaillée des chaînes, des chemins, des arrière-plans et des compétences du didacticiel pictures_html5

Articles Liés

Voir plus