HTML5-Webworker-Websites können auch mit Multithreading-HTML5-Tutorial-Fähigkeiten implementiert werden-H5-Tutorial-php.cn

HTML5-Webworker-Websites können auch mit Multithreading-HTML5-Tutorial-Fähigkeiten implementiert werden

WBOY

Freigeben： 2016-05-16 15:49:31

Original

1683 Leute haben es durchsucht

Web Worker sind neu in HTML5 und eine Technologie zur Implementierung der Hintergrundverarbeitung in Webanwendungen

In HTML4 sind alle von js erstellten Programme Single-Threaded. Wenn es lange dauert, reagiert die Weboberfläche lange nicht. Im schlimmsten Fall wird ein Skript-Eingabeaufforderungsfeld angezeigt:

Meldung, dass die Ausführung des Skripts zu lange dauert. Möchten Sie fortfahren? . . . Dies bringt uns zum Protagonisten dieses Artikels: Web Workers API

Mit dieser API können Benutzer ganz einfach Threads erstellen, die im Hintergrund laufen:

Code kopieren

Der Code lautet wie folgt:

var worker = new Worker('*.js');
Hinweis: Der Hintergrundthread kann nicht auf das Seiten- oder Fensterobjekt zugreifen
Es kann durch Nachrichten gesendet und Nachrichten empfangen und Daten mit Hintergrundthreads übergeben werden:
worker.onmessage = function (e) {};
worker.postMessage = function (e) {};

Bitte sagen Sie es mir und:

Kopieren Sie den Code

Der Code lautet wie folgt:

< ;/title><br> <script type ="text/javascript"><br> function berechne() {<br> var num = 10000000000;<br> var r = 0;<br> für (var i = 1; i < num; i ) { <br /> r = i;<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><br><br><br><br> </div>So entstand mein wunderschöner Rahmen. . . Die Verwendung von Web Worker führt jedoch nicht zu Folgendem: <br><br><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415483316.jpg"><p><br>Kopieren Sie den Code<br></p> <div class="msgheader"> <div class="right">Der Code lautet wie folgt:<span style="CURSOR: pointer" onclick="copycode(getid('phpcode69'));"><u></u>< ;!DOCTYPE html></span> <html xmlns="http://www.w3.org/1999/xhtml"></div> <head></div> <title></ title><div class="msgborder" id="phpcode69"> <script type="text/javascript"><br> var worker = new Worker('c.js');<br> worker.onmessage = function (e) {<br> warning( 'und: ' e.data);<br> };<br> function berechne() {<br> var num = 1000000;<br> worker.postMessage(num);<br> }<br> berechne() ;<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><br><br><br><br> </div> <br>Code kopieren<br><div class="msgheader"> <div class="right">Der Code lautet wie folgt:<span style="CURSOR: pointer" onclick="copycode(getid('phpcode70'));"><u></u>onmessage = function (e) {</span> var num = e.data ;</div> var r = 0;</div> for (var i = 1; i < num; i ) {<div class="msgborder" id="phpcode70"> r = i;<br> }<br> postMessage(r );<br>} <br><br><br> <br><br><br> </div>Ich frage mich manchmal, warum ich so große Zahlen berechne, wenn ich nichts zu tun habe? . . . . Natürlich ist es eine langweilige Spielerei, aber ich dachte, es gäbe ein Szenario, das es erfordern könnte. <p>Als ich früher die Datei-API lernte, gab es einen Vorgang zum Lesen lokaler Dateien. Wenn die Datei zu groß ist, frage ich mich, ob dies angewendet werden kann. Es ist notwendig, es beim zweiten Lernen auszuprobieren. <img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415483317.jpg"> </p> <p>Interaktion von Daten mit Threads </p> <p> </p>Wir vervollständigen hier eine Funktion, generieren zufällig ein Array im Vordergrund und berechnen dann im Hintergrund, dass es in 3 geteilt werden kann und zum Drucken in den Vordergrund zurückkehrt: <p><strong></strong></p> <p><br>Code kopieren<br></p> <div class="msgheader"><div class="right">Der Code lautet wie folgt:<span style="CURSOR: pointer" onclick="copycode(getid('phpcode71'));"><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');
worker.postMessage(JSON.stringify(arr));
worker.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();

};