HTML5 Web ワーカー
Web ワーカー
クライアントサイド JavaScript をマルチスレッド化できないという問題を解決するために、HTML5 仕様に Web ワーカーの概念が導入されました。Web ワーカーはコードの並列スレッドを参照します。自己完結型の環境であり、メインスレッドのウィンドウオブジェクトやドキュメントオブジェクトにアクセスできず、非同期メッセージパッシングメカニズムを通じてのみメインスレッドと通信することができません
実行したいJavaScriptコードを別個のjsに入れる必要がありますファイルを作成し、ページで Worker コンストラクターを呼び出します。パラメーターがファイル パスである場合、Worker コンストラクターを呼び出すステートメントを含むスクリプトを参照として使用する必要があります。絶対パスの場合は、同じソースであることを確認する必要があります (プロトコル + ホスト + ポート)。このファイルでは、ページに参照を表示するためにスクリプト タグを使用する必要はありません
var worker=new Worker('js/worker.js');
簡単な小さな例
0 ～ 10000 の間のすべてを表示しますページ n で割り切れる数値。もちろん i*n は使用しません。計算が少し複雑になります
index.html
<!DOCTYPE html>
<html>
<head>
<title>Web Workers</title>
</head>
<body>
<h1>Web Workers</h1>
<div id="test" style="width:500px;"></div>
<script type="text/javascript">
var worker=new Worker('js/worker.js');
worker.postMessage({
n:69
});
worker.onmessage=function(e){
var test=document.getElementById('test').innerHTML=e.data;
};
</script>
</body>
</html>/js/worker.js
function calc(n){
var result=[];
for(var i=1;i<10000;i++){
var tem=i;
if(i%n==0){
if(i%(10*n)==0){
tem+='<br/>';
}
result.push(tem);
}
}
self.postMessage(result.join(' '));
self.close();
}
onmessage=function(e){
calc(e.data.n);
};表示効果:
Web ワーカー ファイルを作成する
次に、外部 JavaScript で Web ワーカーを作成しましょう。
ここではカウントスクリプトを作成しました。スクリプトは「demo_workers.js」ファイルに保存されます:
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()" , 500);
}
timedCount();
上記のコードの重要な部分は postMessage() メソッドであり、HTML ページにメッセージを送り返すために使用されます。
注: Web ワーカーは通常、このような単純なスクリプトには使用されず、より CPU を集中的に使用するタスクに使用されます。
Web Worker オブジェクトを作成する
Web Worker ファイルは既にあるので、HTML ページからそれを呼び出す必要があります。
次のコードは、ワーカーが存在するかどうかを検出し、存在しない場合は、新しい Web ワーカー オブジェクトを作成して、「demo_workers.js」内のコードを実行します。
w=new Worker("demo_workers.js");}
これで、Web ワーカーからメッセージを送受信できるようになります。
「onmessage」イベント リスナーを Web ワーカーに追加します:
document.getElementById("result").innerHTML=event.data;
};
< pweb="" work="" がメッセージを配信すると、イベント リスナーのコードが実行されます。 events.data="" には、""event.data="" のデータが含まれます。
Web ワーカーの終了
Web ワーカー オブジェクトを作成した後、Web ワーカー オブジェクトは終了されるまで (外部スクリプトが完了した後でも) メッセージをリッスンし続けます。 Web ワーカーを終了し、ブラウザ/コンピュータのリソースを解放するには、terminate() メソッドを使用してください:
w.terminate();