ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 Web ワーカー
HTML5 Web ワーカー
- 高洛峰オリジナル
- 2017-02-06 14:05:161510ブラウズ
ウェブワーカーとは何ですか?
Web ワーカーはバックグラウンドで実行される JavaScript であり、ページのパフォーマンスには影響しません。
HTML ページでスクリプトを実行すると、スクリプトが完了するまでページは応答しない状態になります。
Web ワーカーは、他のスクリプトから独立してバックグラウンドで実行される JavaScript であり、ページのパフォーマンスには影響しません。 Web ワーカーがバックグラウンドで実行されている間、クリックや選択など、必要な操作を続行できます。
HTML5 Web ワーカーの例
次の例は、バックグラウンドでカウントされる単純な Web ワーカーを作成します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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>
demo_workers.js 文件代码：
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();ブラウザが Web ワーカーをサポートしているかどうかを検出します
Web ワーカーを作成する前に、ユーザーのブラウザが Web ワーカーをサポートしているかどうかを検出してください :
if(typeof(Worker)!=="undefined")
{
// 是的! Web worker 支持!
// 一些代码.....
}
else
{
//抱歉! Web Worker 不支持
}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」内のコードを実行します。つまり、外部スクリプトが終了するまで (外部スクリプトが完了した後でも) メッセージをリッスンし続けます。
Web ワーカーを終了し、ブラウザ/コンピューターのリソースを解放するには、terminate() メソッドを使用してください:
w.terminate();
Web ワーカーの完全なサンプル コード
.js ファイルのワーカー コードを見てきました。以下は HTML ページのコードです:
例
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
然后我们就可以从 web worker 发生和接收消息了。
向 web worker 添加一个 "onmessage" 事件监听器：
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};Web ワーカーと DOM Web ワーカーは外部ファイルにあるため、次の JavaScript オブジェクトにアクセスできません:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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>HTML5 Web ワーカー関連の記事については、こちらをご覧ください。 PHP 中国語 Web サイトに注意してください。