HTML5を勉強していく

posted by cheesepie on 2009.08.05, under html5, javascript
30th

ちょっと早く帰れた日は、HTML5を勉強していくよ!

で、早速Web Workersを触ってみました。

バックグラウンドで処理を実行してくれる上に、マルチスレッドで動いてくれるらしい。しかもマルチコアCPU対応とのこと・・!
これまでのJavaScriptはシングルスレッドなので、setTimeout()使って無理くり並列で処理させていたのが、これでだいぶスッキリできる、、のか?

チュートリアルを参考に、フィボナッチ数列の計算をバックグラウンドで実行してみました。

sample.html内

// workers
var start1 = new Date();
var worker1 = new Worker('job1.js');
worker1.onmessage = function (event) {
  document.getElementById('result1').textContent = (new Date() - start1) + "ms, " + event.data;
};

job1.js

function fib( num ) {
  var list = {};
  var _fib = function( n ) {
    if( list[n] ) return list[n];
    if( n <= 2 ) return 1;
    return list[n] = _fib(n-1) + _fib(n-2);
  }
  for( var i = 1; i <= num; i++ ) {
    postMessage( _fib( i ) );
  }
  return list;
};
fib( 1000 );

おー何か楽しい。

HTMLとWorkerのやりとりはシンプルで、
Workerから postMessageで HTMLに通知を送り、
HTML側ではWorkerインスタンスの onmessage イベントで通知を受け取れます。
逆にHTMLからWorkerに通知を送ることはできないみたい。
(ストップとかできないのかな?調べよう)
また、HTML側で定義した関数や変数はWorker内で利用できないので、Worker内に全て記述する必要があります。

HTMLとWorkerで相互にデータをやりとりする場合は、
HTML側で
・workerをインスタンス化
・何かトリガーになる関数で、worker.postMessage( value )
・workerからの結果受け取りのためのworker.onmessage( event )
Worker側で
・onmessage( event ) 内で、postMessage( result )

みたいにやれば、相互にやりとりが可能です。
実際に使う場合は、ラッパを作ってしっかり汎用化しないとカオスな感じになりそうですが。。。

ちなみに、WebSocketはまだSafari4でもFF3.5でも未実装みたい。

次はShared Workerを見ていくお。

Comments are closed.

TrackBack URL :

pagetop