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

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

WBOY

Libérer： 2016-05-16 15:49:31

original

1680 Les gens l'ont consulté

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> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><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> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><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();

};