Your SlideShare is downloading. ×
Web Workers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Workers

1,701
views

Published on


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

No Downloads
Views
Total Views
1,701
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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