コメント:Web Workersは、HTML5に追加された新しいテクノロジーであり、Webアプリケーションにバックエンド処理を実装しています。
Webワーカーは、HTML5に追加された新しいテクノロジーであり、Webアプリケーションでバックグラウンド処理を実装しています。
HTML4では、JSによって作成されたプログラムはすべてシングルスレッドです。長い時間がかかる場合、Webインターフェイスは長い間応答しません。最悪の場合、スクリプトプロンプトボックスがポップアップします。
それは、継続するかどうかにかかわらず、スクリプトがあまりにも長く実行されることを促します。 。 。 。したがって、この記事の主人公が紹介されています:WebワーカーAPI
このAPIユーザーを使用すると、バックグラウンドで実行されているスレッドを簡単に作成できます。背景プログラムを作成するのは非常に簡単です。
var Worker = new Worker( '*。JS');
注:背景スレッドはページやウィンドウオブジェクトにアクセスできません。
メッセージを送信してメッセージを受信することにより、データをバックグラウンドスレッドで渡すことができます。
worker.onmessage = function(e){};
worker.postmessage = function(e){};
合計について話しましょう:
<!doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<script type = "text/javascript">
関数計算(){
var num = 10000000000;
var r = 0;
for(var i = 1; i <num; i ++){
r += i;
}
アラート(r);
}
計算();
</script>
</head>
<body>
</body>
</html>
だから私の美しいフレームが与えられました。 。 。しかし、Webワーカーの使用は次のとおりです。
<!doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<script type = "text/javascript">
var Worker = new Worker( 'c.js');
worker.onmessage = function(e){
alert( 'and:' + e.data);
};
関数計算(){
var num = 1000000;
worker.postmessage(num);
}
計算();
</script>
</head>
<body>
</body>
</html>
onmessage = function(e){
var num = e.data;
var r = 0;
for(var i = 1; i <num; i ++){
r += i;
}
ポストメサージ(r);
}
時々、何もすることがないのに、なぜそんなに多数を計算するのかと思います。 。 。 。 。もちろん、これは退屈なトリックですが、これを必要とするシナリオがあると思います。
先ほどファイルAPIを学んでいたとき、ローカルファイルを読み取る操作がありました。ファイルが大きすぎると、非常に遅くなります。これを適用できるのだろうか? 2回目の調査中に試してみる必要があります。
スレッドとの対話
ここで関数を完成させ、前景でアレイをランダムに生成してから、フォアグラウンドに戻り、計算が3つのうち3つになる場合はバックグラウンドに印刷します。
メインプログラム
<!doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style>
スパン
{
パディング:10px;
}
</style>
<script src = "../ jquery-1.7.1.js" type = "text/javascript"> </script>
<script type = "text/javascript">
$(document).ready(function(){
var Worker = new Worker( 't1.js');
worker.postmessage( '');
worker.onmessage = function(e){
var arr = e.data.split( ';');
for(var i = 0、len = arr.length; i <len; i ++){
var dom = $( '<span>' + arr [i] + '</span>');
$( '#body')。append(dom);
}
}
});
</script>
</head>
<body>
<div>
</div>
</body>
</html>
配列を生成するプログラム
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){
//選択結果をフロントデスクに送り返します
ポストメサージ(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];
}
}
ポストメサージ(str);
近い();
};
プログラムロジック説明:
ここでは、ネストされたスレッドが使用されています
まず、前景プログラムを実行します。ここでは、子スレッドT1が初期化されて100個の配列を初期化します。
次に、チャイルドスレッドT1は、子スレッドT2を初期化し(配列を通過し、3で分割できる数値を取り出し、文字列を形成するために使用されます)、T1はアレイデータをT2に渡します
T2はT1データを受信し、計算後、ストリングをT1、T1にフロントデスクに転送すると、フロントデスクが独自のロジックを実行します
プロセスは終了します
結論
簡単に言えば、私はここで子スレッドを宣言し、その後、子どもにデータを送信してから、結果を待っています。
最後の通信API Webソケットと組み合わせることで、2つをWebチャットプログラムに組み合わせることができ、ローカルストレージ/ローカルデータベースを使用できるようです。
これは良いことかもしれません。