HTML5 Web ワーカー
Web ワーカーはバックグラウンドで実行される JavaScript であり、ページのパフォーマンスには影響しません。
Web ワーカーとは何ですか?
HTML ページでスクリプトを実行すると、スクリプトが完了するまでページは応答しない状態になります。
Web ワーカーは、他のスクリプトから独立してバックグラウンドで実行される JavaScript であり、ページのパフォーマンスには影響しません。 Web ワーカーがバックグラウンドで実行されている間、クリックや選択など、必要な操作を続行できます。
ブラウザのサポート
Internet Explorer 10、Firefox、Chrome、Safari、Opera はすべて Web ワーカーをサポートしています。
HTML5 Web ワーカーの例
次の例では、バックグラウンドでカウントされる単純な Web ワーカーを作成します。
インスタンス
インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
demo_workers.js ファイルコード: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
ブラウザが Web Worker をサポートしているかどうかを検出します Web ワーカーを作成する前に、ユーザーのブラウザがそれをサポートしているかどうかを確認してください:
if(typeof(Worker)!=="未定義")
{
// はい! Web ワーカーをサポートしています!
//
いくつかのコード.. ..}
else
{
// 申し訳ありません! Web ワーカーはサポートされていません..
}
// はい! Web ワーカーをサポートしています!
//
いくつかのコード.. ..}
else
{
// 申し訳ありません! Web ワーカーはサポートされていません..
}
Web ワーカー ファイルを作成しています 次に、外部 JavaScript で Web ワーカーを作成しましょう。 ここではカウントスクリプトを作成しました。スクリプトは「demo_workers.js」ファイルに保存されます:
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()" , 500);
}
timedCount();
上記のコードの重要な部分は postMessage() メソッドであり、HTML ページにメッセージを送り返すために使用されます。 function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()" , 500);
}
timedCount();
注: Web ワーカーは通常、このような単純なスクリプトには使用されず、より CPU を集中的に使用するタスクに使用されます。
Web Worker オブジェクトを作成する Web Worker ファイルはすでにあるので、HTML ページからそれを呼び出す必要があります。 /p>次のコードは、ワーカーが存在するかどうかを検出し、存在しない場合は、新しい Web ワーカー オブジェクトを作成して、「demo_workers.js」内のコードを実行します。 /p>
if(typeof(w )== "未定義")
{
w=new Worker("demo_workers.js");
}
w=new Worker("demo_workers.js");
}
これで、Web ワーカーからメッセージを送受信できるようになります。
「onmessage」イベント リスナーを Web ワーカーに追加します:
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
document.getElementById("result").innerHTML=event.data;
};
< pweb="" work="" がメッセージを配信すると、イベント リスナーのコードが実行されます。 events.data="" には、""event.data="" のデータが含まれます。
