web workers

 JavaScript でマルチスレッドプログラミング

@kabochha

 JavaScript でマルチスレッドプログラミングをしたい

 JavaScript でマルチスレッドプログラミングをしたい

ってわけで WebWorker を試してみよう！と

 JavaScript でマルチスレッドプログラミングをしたい

ってわけで WebWorker を試してみよう！と

思ったんですが…

Web Workers とは

高負荷な計算処理などを UI 以外のスレッドで実行するための機能

Web Workers とは

高負荷な計算処理などを UI 以外のスレッドで実行するための機能

独立したスレッドなので、 UI 側のメモリや CPU リソースに影響せずにタスクを実行できる

Web Worker でできること navigator オブジェクト location オブジェクト（読み取り専用） XMLHttpRequest 関数 (Ajax) アプリケーションキャッシュ importScripts を使った JSONP その他の Web Workers の生成 下記 window オブジェクト バイナリデータと Base64ASCⅡ を相互変換する

atob(),bota() にsetTimeout() 、 clearTimeout() 、 setInterval() 、 clearInterval() 、 dump()

できないこと

window オブジェクトdocument オブジェクトparent オブジェクト

使いどころ大きな JSON や文字列の処理Canvas などでのフィルタリング処理動画や音声の解析、処理複雑な計算（暗号化、 3D ポジショニ

ング、素数計算など )データの先読み、キャッシュスペルチェックなどの構文解析IndexedDB を用いたデータ処理

ブラウザ対応度

http://caniuse.com

ブラウザ対応度 shared worker

http://caniuse.com

スマートフォンだとmobile Safari は 5.0 からAndroid Brower は 2.1 のみAndorid Chrome は専有ワーカーの

み対応

スマートフォンだとmobile Safari は 5.0 からAndroid Brower は 2.1 のみmobile Chrome は専有ワーカーの

み対応

というわけで現状だと使いにくい

Web Workers の種類

専用ワーカーインラインワーカー共有ワーカー

専用ワーカー

自分自身を起動したスクリプトとのみ通信できる

使い方1. Worker コンストラクタを呼び出す2. Web workers が送ってくるメッ

セージを受け取るメソッド(onmessage) を用意

3. Worker の開始 (postMessage)4. Web Worker 側でも onmessage

と postMessage を用意する

メインスクリプト//Worker の生成var worker = new Worker('work.js');

//Web Worker からのメッセージ受信用メソッドworker.onmessage = function(e) { console.log(e.data);//return Worker Started };

// Worker スタートworker.postMessage('Worker Started’);

Worker 素クリプト

// メインスクリプトからのメッセージ受信用メソッドonmessage = function(e){

// メインスクリプト側にメッセージを送る postMessage(“return : “ + e.data); };

インラインワーカー

動的に Worker を生成したいⅠ 枚の HTML ファイルで済ませた

いChrome の拡張機能としてバンドル

したい

使い方

1. BlobBuilder と createObjectURLを使って Worker 用ファイルを構築する

2. 1 を使って Worker オブジェクトを生成する

3. ごにょごにょする

//worker用のスクリプト生成var str = "onmessage = function(e) { postMessage(‘return ’ +e.data); }”;

//blobオブジェクト生成var blob = new Blob([str], {type:"text/javascript"});

//createObjectURLをChromeでもFirefoxでも使えるようにvar myUrl = window.webkitURL || window.URL;

//ファイル生成var blobURL = myUrl.createObjectURL(blob);

var worker = new Worker(blobURL);worker.onmessage = function(e) { console.log(e.data); // return Worker Started};worker.postMessage('Worker Started');

共有ワーカー

ユーザー認証や接続状況をⅠヶ所にまとめて参照できる

別 window 間のデータの一貫性を保証する

モデルをⅠつの場所に集めることができる

使い方

new SharedWorker で生成SharedWorker 側は onmeaage で

はなく onconnect でメッセージ受信EventLisntener を使う場

合、 start() を呼んで Worker で始める

//共有ワーカーを生成var worker = new SharedWorker("sworker.js");

worker.port.onmessage = function(e){ console.log(e.data);// ports = xx};

//共有ワーカーにメッセージ送信Worker.port.postMessage();

メインスクリプト

//コネクション数のカウントvar connect = 0;

//受信メソッドonconnect = function(e){connection++;

e.ports[0].postMessage("ports = " + connection);}

Worker スクリプト

Parallel.js

以上ですご清聴ありがとうございました