web workers
TRANSCRIPT
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 を用いたデータ処理
スマートフォンだと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
以上ですご清聴ありがとうございました