コイケアキヨシ blog: HTML5のWeb Workersを使ってみた

Web WorkersはJavaScriptをバックグラウンドで動かすことができる仕組みです！

バックグラウンドで動くことができるので、重たい処理をJavaScriptで処理させてもブラウザが固まらない！っていうメリットがあります。
使い方によっては、めちゃくちゃ便利だと思います。

ただし、WebWorkersからはDOMを操作ができないので注意！
やらないと思うが、alertも使えないので気をつけてください！

■サンプル1
バックグラウンドで、ひたすらカウントアップした結果を返し表示するだけ
サンプル

-index.html

view plain print ?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var init = function() {
var worker = new Worker('worker.js'); //①
worker.onmessage = function(event) { //②
document.getElementById('hoge').innerHTML = event.data; //③
};
}
</script>
</head>
<body onload="init();">
<div id="hoge"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var init = function() {
var worker = new Worker('worker.js');           //①
worker.onmessage = function(event) {    //②
document.getElementById('hoge').innerHTML = event.data;  //③
};
}
</script>
</head>
<body onload="init();">
<div id="hoge"></div>
</body>
</html>

-worker.js

view plain print ?

var count = 0;
setInterval(function() {
postMessage('hoge' + count++);
}, 1000);

var count = 0;
setInterval(function() {
postMessage('hoge' + count++);
}, 1000);

■解説
①バックグラウンドで実行したいJavaScript(Worker)を指定する
②Workerからのメッセージが送信された際に実行されるイベントを登録する。
③Workerから受け取ったメッセージのデータを取得し、表示させる。
以上が簡単な使い方です！

■サンプル2
バックグラウンドで実行されるWorkerに引数を渡して、それに応じて値を返してもらう
一応、四則演算の結果を返すサンプルにしています。

-index.html

view plain print ?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var hoge = function() {
var worker = new Worker('worker.js');
var json = '{';
json += 'num1:' + document.getElementById('num1').value;
json += ',op:"' + document.getElementById('op').value + '"';
json += ',num2:' + document.getElementById('num2').value;
json += '}';
worker.postMessage(json);
worker.onmessage = function(event) {
document.getElementById('result').innerHTML = event.data;
};
}
</script>
</head>
<body>
<form onsubmit="hoge(); return false;">
<input type="number" id="num1">
<select id="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" id="num2">
=<span id="result"></span>
<input type="submit" />
</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var hoge = function() {
var worker = new Worker('worker.js');
var json = '{';
json += 'num1:' + document.getElementById('num1').value;
json += ',op:"' + document.getElementById('op').value + '"';
json += ',num2:' + document.getElementById('num2').value;
json += '}';
worker.postMessage(json);
worker.onmessage = function(event) {
document.getElementById('result').innerHTML = event.data;
};
}
</script>
</head>
<body>
<form onsubmit="hoge(); return false;">
<input type="number" id="num1">
<select id="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" id="num2">
=<span id="result"></span>
<br>
<input type="submit" />
</form>
</body>
</html>

-worker.js

view plain print ?

var onmessage = function(event) {
var data = eval('(' + event.data + ')');
var num1 = data.num1;
var num2 = data.num2;
var op = data.op;
var result;
switch (op) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
default :
result = 'err';
}
//試しに、重たい処理をやらせてみる
var count = 0;
for(var i = 0; i < 1000000000; i++) {
count += i;
}
postMessage(result);
};

var onmessage = function(event) {
var data = eval('(' + event.data + ')');
var num1 = data.num1;
var num2 = data.num2;
var op = data.op;
var result;
switch (op) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
default :
result = 'err';
}
//試しに、重たい処理をやらせてみる
var count = 0;
for(var i = 0; i < 1000000000; i++) {
count += i;
}
postMessage(result);
};

■解説 ①Workerに対して、データを送信する。 ②WorkerがpostMessageをした場合に呼ばれる。 Workerには無駄にカウントアップする処理が含まれている、通常ならブラウザがロックされてしまい、スクロールができなくなる。でも、今回はWorkerを使用しているのでDOM側がロックされる事がない。試しにサンプル画面でスクロールをして見てください。

コイケアキヨシ blog

2010年6月1日火曜日

HTML5のWeb Workersを使ってみた

0 件のコメント:

コメントを投稿