JavaScript の「Web Workers」に触ってみる

古郡 (2010年10月19日 14:49)
流通システム部

みなさん、こんにちは。
流通システム部の古郡です。

HTML5関連のAPIのひとつに「Web Workers」というものがあります。
これはバックグラウンドで動作するJavaScriptのスレッドを生成するAPIになります。

このAPIはすでにIE以外の最新ブラウザであれば簡単な処理は動作可能です。
今回、私はChrome 6を使用して触ってみました。

まず、以下のようなhtmlのページがあったとします。

htmlソース

このページは「ボタン1」、「ボタン2」という名前の２つのボタンが並んでいるだけのページです。
「ボタン1」をクリックすると「testJs」というJavaScriptの関数が実行されます。
「testJs」ではただ変数 j に1を足していく足し算を10億回繰り返します。
その後alertで計算結果を出力します。

ページを開いて「ボタン1」をクリックすると関数が重く、画面が固まってしまいます。
そのため「ボタン2」もクリックできなくなります。

これを「Web Workers」を使用したページに変更すると以下のようになります。

htmlソース

worker.jsソース

var j;
j = 0
for(i = 0; i < 1000000000; i++){
  j = j + 1;
};
postMessage(j);

始めにWorkerオブジェクトを作成します。
引数はバックグラウンドで実行する処理を記述してあるjsファイルのパスを記述します。
次にWorkerオブジェクトからメッセージが帰ってきたときの処理を記述します。

jsファイルには実行する処理に追加して、最後に「postMessage」を使用して呼び出し元にメッセージを返します。
今回は計算結果を格納する変数jを返却するようにしています。

このページで「ボタン1」をクリックするとバックグラウンドで処理が開始されます。
Workerオブジェクトが生成されるとChromeのタスクマネージャでも、
Windowsのタスクマネージャでもプロセスが追加されるのでタスクマネージャを開けば、視覚的にもよく分かります。

処理はバックグラウンドで実行されるので画面が固まることなく、「ボタン2」のクリック処理も実行することが可能です。

「Web Workers」はIE9のベータ版でもまだ実装されていないため、まだ実用的な技術とは言い難いです。
しかしJavaScriptの処理量が増えることを考えると、この技術は覚えておいて損は無いと思います。

JavaScriptは自宅でも簡単に試すことが出来るので是非試してみてはいかがでしょうか。

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できますシステム診断・システムリフォームのお申し込みはこちらから。

JavaScript の「Web Workers」に触ってみる

システム開発のアイロベックスは、創業23年を迎える
プロフェッショナル集団です。