HTML5 Web Workers Web サイトは、multi-threading_html5 チュートリアルスキルを使用して実装することもできます-H5 チュートリアル-php.cn

HTML5 Web Workers Web サイトは、multi-threading_html5 チュートリアルスキルを使用して実装することもできます

WBOY

リリース： 2016-05-16 15:49:31

オリジナル

1683 人が閲覧しました

Web ワーカーは HTML5 の新機能で、Web アプリケーションでバックグラウンド処理を実装するために使用されるテクノロジーです

HTML4 では、js で作成されたプログラムはすべてシングルスレッドです。時間がかかると、Web インターフェイスが長時間応答しなくなり、最悪の場合、スクリプトプロンプトボックスが表示されます。

スクリプトの実行に時間がかかりすぎるというメッセージが表示されます。続行しますか? 。。。ここから、この記事の主人公である Web Workers API

に行き着きます。

この API を使用すると、バックグラウンドで実行されるスレッドを簡単に作成できます。

コードをコピーコードは次のとおりです:

var worker = new Worker('*.js');
注: バックグラウンドスレッドはページまたはウィンドウオブジェクトにアクセスできません
メッセージで送信したり、メッセージを受信したり、バックグラウンドスレッドでデータを渡したりすることができます:
worker.onmessage = function (e) {};
worker.postMessage = function (e) {};

教えてくださいそして:

コードをコピーしますコードは次のとおりです:

< ;/title><br /> <script type ="text/javascript"><br /> function Calculate() {<br /> var num = 10000000000;<br /> var r = 0;<br /> for (var i = 1; i <br /> ) { <br /> r = i;<br /> }<br /> 計算();<br /> </script> 🎜> <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> </div> <br> <br>それで、私の美しいフレームが完成しました。。。ただし、Web Worker を使用すると、次のことはできません: <img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415483316.jpg"><p><br><br></p> <div class="msgheader">コードをコピーします<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode69'));"><u>コードは次のとおりです:</u></span></div><!DOCTYPE html></div> <html xmlns="http://www.w3.org/1999/xhtml"><div class="msgborder" id="phpcode69"> <head><br> <title></ title><br> <script type="text/javascript"><br> var worker = new Worker('c.js');<br> worker.onmessage = function (e) {<br>alert( 'および: ' 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><br><br> </div> <br><br><div class="msgheader">コードをコピーします<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode70'));"><u>コードは次のとおりです。</u></span></div>onmessage = function (e) {</div> var num = e.data ;<div class="msgborder" id="phpcode70"> var r = 0;<br> for (var i = 1; i r = i;<br> }<br> postMessage(r );<br>} <br><br><br> <br> </div> <p>時々疑問に思うことがありますが、何もすることがないのに、なぜこのような大きな数字を計算するのでしょうか? 。。。。もちろん、それは退屈なギミックですが、それを必要とするシナリオがあると思いました。 <img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415483317.jpg"> </p>以前ファイルAPIを学習していたときに、ファイルが大きすぎると非常に遅くなるという操作がありましたが、これは応用できるのでしょうか？２回目の学習時に試してみる必要があります。 <p> </p> <p>スレッドとのデータのやり取り </p> <p> <strong>ここで関数を完成させ、フォアグラウンドで配列をランダムに生成し、それが 3 つに分割できることをバックグラウンドで計算し、印刷のためにフォアグラウンドに戻ります: </strong></p> <p><br> <br></p> <div class="msgheader">コードをコピーします<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode71'));"><u>コードは次のとおりです:</u><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 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 if (parseInt(arr[i]) % 3 == 0) {
if (str != '') str = ';';
str = arr[i];
}
}
postMessage(str);
close();

};