JavaScript処理をバックグラウンドで実行する方法

後藤大地　 [2010/03/30]

Robert’s talk

Robert Nyman氏がUsing HTML5 Web Workers to have background computational power - Robert's talkにおいて、Web Workersの実装例を紹介している。短くてわかりやすいサンプルコードが掲載されておりWeb Workersを試してみたい場合の最初の取っ掛かりとして取り組みやすい。

Web WorkersはHTML5とともに策定が進められているJavaScript API。JavaScriptファイルをダイナミックに読み込みバックグラウンドで処理を実施する。UIとは別のスレッドで動作する。特徴的な動作や仕組みまとめると次のとおり。

Web Workersの特徴
JavaScriptファイルを読み込んでバックグラウンドで処理を実行する。
別スレッドで動作するため、マルチコアの性能を発揮しやすくなる。
UIスレッドとは別のスレッドで動作するため、重たい処理を実施することでUIが固まりレスポンスが悪くなるという状況を避けられるようになる。

実装上の主な特徴
Web WorkersスレッドとUIスレッドはお互いにpostMessage()でデータの送信が可能。
Web WorkersスレッドとUIスレッドはお互いにonmessageイベントハンドラでpostMessage()のイベントを受信する。
エラーはonerrorイベントハンドラで処理する。

今のところサポートしているブラウザはFirefoxとSafari、Chrome。IEとOperaはサポートしていない。ブラウザのUIが固まるという現象を避けることができ、利用するケースによって左右されるもののマルチコアの性能を発揮しやすくなるとい点においてWeb Workersは高く注目される。しかしながら、今のところすべての主要ブラウザがサポートしていないうえに、デバッガによるトレースが簡単には実施できないという問題もある。

しかし、よりリッチで多機能なWebアプリケーションを実装するにあたってWeb Workersの機能は魅力的。フレームワームやライブラリ、実装ノウハウは今後さまざまな発表があると思うが、注目しておきたい技術のひとつといえる。以降にUsing HTML5 Web Workers to have background computational powerで紹介されているコードを試せるようにまとめたものを掲載しておく。2つのファイルを同じフォルダに配置してWeb Workersに対応したブラウザでHTMLファイルを閲覧することで動作する。

【demo.html】

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Web Worker Demo</title>
<script type="text/javascript">
function init()
{
  var worker = new Worker("worker.js");
  worker.onmessage = function(e) {
    alert(e.data);
  };
  worker.onerror = function(e) {
    alert(e.data);
  };
  worker.postMessage(0);
}
window.addEventListener("load", init, true);
</script>
</head>
<body>
</body>
</html>

【worker.js】

onmessage = function(e) {
  for (var i=e.data, j=10; i<j; i++) {
    postMessage(i);
  };
};


Firefox 3.7 Alpha 3での閲覧例 - ダイアログがすべて展開される	Safari4での閲覧例 - 最後にポップアップしたダイアログから順に処理される

Chrome5ので閲覧例 - 最初にポップアップしたダイアログから順に処理される

Using HTML5 Web Workers to have background computational powerのサンプルをそのまま使おうとすると一気に大量のダイアログを開こうとしてFirefoxは動作不全に陥るので注意が必要。上記サンプルコードでは繰り返しの数を減らして動作するように変更してある。