|
HTML5＋CSS3 |
HTML5編
|
| Lesson 16 | 新機能の使用方法(8) WebWorkers |
|||
| 制作・文 | 加茂雄亮（株式会社ロクナナ） |
| Web Workersはこれまでは不可能だったブラウザ上でのマルチスレッド処理を可能にする技術だ。JavaScriptで負荷の高い処理を行う場合も、ユーザーにストレスを感じさせずに済むようになる。 |
WebWorkers
昨今、Ajaxの流行とGoogleChromeやV8 JavaScript Engineの登場で、ブラウザ業界でのJavaScript高速化競争が白熱してきている。とはいえ、JavaScriptはいまだに重い負荷の掛かる処理は非常に苦手だ。高度な演算処理や構造が複雑なXMLのパース処理などでは、処理が終了するまでフリーズしたり、処理が中断されて操作できないといった問題も多い。他の言語であれば、プロセス上で本処理とは別スレッドを作り、そこで並行処理を行うことで負荷を分散するマルチスレッドに対応している。JavaScriptは従来であればシングルスレッドの言語であり、マルチスレッドには対応していなかったが、策定が進んでいるWebWorkersを利用することでマルチスレッドが実現できるようになる【1】。
【1】
シェルピンスキーの
ギャスケット
高度な演算は高負荷処理の典型だ。ここではcanvasと組み合わせて、フラクタル図形の一種であるシェピンスキーのギャスケットを描画してみる。シェルピンスキーのギャスケットについての詳しい解説は省くが、【2】のようなアルゴリズムでランダム座標からギャスケットが浮かび上がる。シェルピンスキーのギャスケットが浮かび上がるまでに、必要な点の数は最低500だ。しかし今回は実験なので、より多く1,000,000点を打つことにした。つまり、1,000,000回、forを回すことになる。ブラウザに非常に大きな負荷が掛かることが予想できるだろう。
【2】(1)～(5)を繰り返していくと、(6)にあるような図形が浮かび上がってくる。※図内は数字に丸
Workerとの
やりとり
サンプルでは座標計算をWorker に任せている。Workerの使い方自体はそれほど難しくなく、並列処理したいスクリプトをWorker オブジェクトに渡して生成するだけだ。また、並列処理するということは別世界とやりとりするということに注意が必要だ。スレッド内ではDOMにアクセスすることができず、またWorkerオブジェクトを介してメッセージのやり取りをしなければならない。具体的には、worker.onmessage ハンドラでWorkerからのメッセージを受信し、worker.postMessage メソッドでメッセージを送信することができる【3】。また、Workerオブジェクトの別スレッド（サンプルでのworkers.js内の処理）では、クライアント側と同様、onmessageハンドラでメッセージを受け取り、postMessageメソッドでメッセージの送信が可能だ。さらに、importScriptsメソッドを利用すれば、外部のスクリプトをWorker 内で読み込ませることができる【4】。今回のサンプルでは、座標計算のコア処理を外部スクリプト(gasket.js)に行わせ、Worker 本体(worker.js) 【5】内で利用して繰り返し処理を行っている【6】。
結果を見てみよう。サンプルファイルでは、1,000,000回forを回すと、Workerを利用しない通常の方法ではやはりブラウザが停止して操作できず、その間描画領域画面は白いままだ【7】。しかし、Workerを利用した方法ではブラウザは停止せず、ほかのタブなどへも移動できる。描画領域でも計算が終わるまでローディングサークルが回りつづけ、処理が続行されていることがわかる【8】。処理が終了すれば、ローディングサークルが消え、シェルピンスキーのギャスケットが描画される【9】。
【3】
【4】
【5】worker.js（Worker本体）
【6】workers.htm（l Worker利用）
【7】
【8】
【9】
＞＞目次に戻る
