JavaScriptでマルチスレッドプログラミング     @kabochha
   JavaScriptでマルチスレッド    プログラミングをしたい
 JavaScriptでマルチスレッド  プログラミングをしたい ってわけでWebWorkerを試し  てみよう!と
 JavaScriptでマルチスレッド  プログラミングをしたい ってわけでWebWorkerを試し  てみよう!と 思ったんですが…
Web Workersとは   高負荷な計算処理などをUI以外のス    レッドで実行するための機能
Web Workersとは 高負荷な計算処理などをUI以外のス  レッドで実行するための機能 独立したスレッドなので、UI側のメ  モリやCPUリソースに影響せずにタ  スクを実行できる
Web Workerでできること navigatorオブジェクト locationオブジェクト(読み取り専用) XMLHttpRequest関数(Ajax) アプリケーションキャッシュ importScriptsを使ったJSONP ...
できないことwindowオブジェクトdocumentオブジェクトparentオブジェクト
使いどころ 大きなJSONや文字列の処理 Canvasなどでのフィルタリング処理 動画や音声の解析、処理 複雑な計算(暗号化、3Dポジショニ  ング、素数計算など) データの先読み、キャッシュ スペルチェックなどの構文解析 Ind...
ブラウザ対応度http://caniuse.com
ブラウザ対応度 shared workerhttp://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の生成var worker = new Worker(work.js);//Web Workerからのメッセージ受信用メソッドworker.onmessage = function(e) { console.lo...
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...
共有ワーカー ユーザー認証や接続状況をⅠヶ所に  まとめて参照できる 別window間のデータの一貫性を保証  する   モデルをⅠつの場所に集めることが    できる
使い方 new SharedWorkerで生成 SharedWorker側はonmeaageではなく  onconnectでメッセージ受信 EventLisntenerを使う場合、start()を  呼んでWorkerで始める
メインスクリプト//共有ワーカーを生成var worker = new SharedWorker("sworker.js");worker.port.onmessage = function(e){    console.log(e.data)...
Workerスクリプト//コネクション数のカウントvar connect = 0;//受信メソッドonconnect = function(e){connection++;e.ports[0].postMessage("ports = " + ...
Parallel.js
以上ですご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

Web Workers

2,583 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,583
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
5
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Web Workers

  1. 1. JavaScriptでマルチスレッドプログラミング @kabochha
  2. 2.  JavaScriptでマルチスレッド プログラミングをしたい
  3. 3.  JavaScriptでマルチスレッド プログラミングをしたい ってわけでWebWorkerを試し てみよう!と
  4. 4.  JavaScriptでマルチスレッド プログラミングをしたい ってわけでWebWorkerを試し てみよう!と 思ったんですが…
  5. 5. Web Workersとは 高負荷な計算処理などをUI以外のス レッドで実行するための機能
  6. 6. Web Workersとは 高負荷な計算処理などをUI以外のス レッドで実行するための機能 独立したスレッドなので、UI側のメ モリやCPUリソースに影響せずにタ スクを実行できる
  7. 7. Web Workerでできること navigatorオブジェクト locationオブジェクト(読み取り専用) XMLHttpRequest関数(Ajax) アプリケーションキャッシュ importScriptsを使ったJSONP その他のWeb Workersの生成 下記windowオブジェクト バイナリデータとBase64ASCⅡを相互変換する atob(),bota()にsetTimeout()、clearTimeout()、 setInterval()、clearInterval()、dump()
  8. 8. できないことwindowオブジェクトdocumentオブジェクトparentオブジェクト
  9. 9. 使いどころ 大きなJSONや文字列の処理 Canvasなどでのフィルタリング処理 動画や音声の解析、処理 複雑な計算(暗号化、3Dポジショニ ング、素数計算など) データの先読み、キャッシュ スペルチェックなどの構文解析 IndexedDBを用いたデータ処理
  10. 10. ブラウザ対応度http://caniuse.com
  11. 11. ブラウザ対応度 shared workerhttp://caniuse.com
  12. 12. スマートフォンだと mobile Safariは5.0から Android Browerは2.1のみ Andorid Chromeは専有ワーカーのみ 対応
  13. 13. スマートフォンだと mobile Safariは5.0から Android Browerは2.1のみ mobile Chromeは専有ワーカーのみ対 応というわけで現状だと使い にくい
  14. 14. Web Workersの種類専用ワーカーインラインワーカー共有ワーカー
  15. 15. 専用ワーカー 自分自身を起動したスクリプトとの み通信できる
  16. 16. 使い方1. Workerコンストラクタを呼び出す2. Web workersが送ってくるメッセー ジを受け取るメソッド(onmessage) を用意3. Workerの開始(postMessage)4. Web Worker側でもonmessageと postMessageを用意する
  17. 17. メインスクリプト//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’);
  18. 18. Worker素クリプト//メインスクリプトからのメッセージ受信用メソッドonmessage = function(e){//メインスクリプト側にメッセージを送る postMessage(“return : “ + e.data); };
  19. 19. インラインワーカー 動的にWorkerを生成したい Ⅰ枚のHTMLファイルで済ませたい Chromeの拡張機能としてバンドルし たい
  20. 20. 使い方1. BlobBuilderとcreateObjectURLを 使ってWorker用ファイルを構築する2. 1を使ってWorkerオブジェクトを生 成する3. ごにょごにょする
  21. 21. //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);
  22. 22. 共有ワーカー ユーザー認証や接続状況をⅠヶ所に まとめて参照できる 別window間のデータの一貫性を保証 する モデルをⅠつの場所に集めることが できる
  23. 23. 使い方 new SharedWorkerで生成 SharedWorker側はonmeaageではなく onconnectでメッセージ受信 EventLisntenerを使う場合、start()を 呼んでWorkerで始める
  24. 24. メインスクリプト//共有ワーカーを生成var worker = new SharedWorker("sworker.js");worker.port.onmessage = function(e){ console.log(e.data);// ports = xx};//共有ワーカーにメッセージ送信Worker.port.postMessage();
  25. 25. Workerスクリプト//コネクション数のカウントvar connect = 0;//受信メソッドonconnect = function(e){connection++;e.ports[0].postMessage("ports = " + connection);}
  26. 26. Parallel.js
  27. 27. 以上ですご清聴ありがとうございました

×