HTML5 基本教程

HTML5 API

HTML5 メディア

HTML5 グラフィック

HTML5 サーバーから送信されるイベント HTML5 アプリケーションキャッシュ

HTML5 Web Workers

web worker はバックグラウンドで実行される JavaScript で、ページのパフォーマンスに影響を与えません。

Web Worker とは何ですか？

HTML ページでスクリプトを実行する際、ページの状態は応答不能で、スクリプトが完了するまで続きます。

web worker はバックグラウンドで実行される JavaScript で、他のスクリプトとは独立しており、ページのパフォーマンスに影響を与えません。クリックや選択など、何かを行う間に、web worker がバックグラウンドで実行されます。

ブラウザのサポート

Internet Explorer 10, Firefox、Chrome、Safari、Opera はすべて Web workers をサポートしています。

HTML5 Web Workers サンプル

以下のサンプルでは、バックグラウンドでカウントする単純な web worker を作成しています：

オンラインサンプル

カウント:

demo-workers.js ファイルのコード：

var i=0;
function timerCount()
{
i=i+1;
postMessage(i);
setTimeout("timerCount()",500);
}
timerCount();

ブラウザが Web Worker をサポートしているかの確認

web worker を作成する前に、ユーザーのブラウザがそれをサポートしているかを確認してください：

if(typeof(Worker)!=="undefined")
{
　　　　// はい！Web worker はサポートされています！
　　　　// 一部のコード.....
}
else
{
　　　　//申し訳ありませんが、Web Worker はサポートされていません。
}

web worker ファイルの作成

さて、外部の JavaScript で私たちの web worker を作成しましょう。

ここで、カウントスクリプトを作成しました。このスクリプトは "demo" に保存されています。-workers.js" ファイル中：

var i=0;
function timerCount()
{
　　　　i=i+1;
　　　　postMessage(i);
　　　　setTimeout("timerCount()",500);
}
timerCount();

以下のコードでは、postMessage() メソッドが重要です。 - HTML ページにメッセージを返信するために使用されます。

注意: web worker は通常、CPU 資源を消費するタスクに対して使用されますが、このような単純なスクリプトには使用されません。

Web Worker オブジェクトの作成

web worker ファイルを持っていますが、現在、HTML ページからそれを呼び出す必要があります。

以下のコードは worker が存在するかを確認し、存在しない場合、- 新しい web worker オブジェクトを作成し、"demo"を実行します。-workers.js" 中的代码：

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 worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。

终止 Web Worker

当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

完整的 Web Worker 示例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：

示例

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
　
<p>计数：　<output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>　
<button onclick="stopWorker()">停止工作</button>
　
<p><strong>注意：</strong>/<strong>Internet Explorer</strong>　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>

テストを試してみる ‹/›

Web Workers と DOM

Web Worker が外部ファイルに位置しているため、以下の JavaScript オブジェクトにアクセスできません：

window オブジェクト
document オブジェクト
parent オブジェクト

HTML5 サーバーから送信されるイベント HTML5 アプリケーションキャッシュ