Try Webworkers

2,502 views

Published on

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

  • Be the first to like this

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

No notes for slide

Try Webworkers

  1. 1. Web Workersを 使おう  2010/01/23  mollifier  http://d.hatena.ne.jp/mollifier/
  2. 2.  Web Workers とは  Web Workers の使い方  活用できる場面
  3. 3.  Web Workers とは  Web Workers の使い方  活用できる場面
  4. 4. Web Workersは、 新しいJavaScript の機能
  5. 5. 例えば、 JavaScriptで 足し算したい場合
  6. 6. 素朴な書き方
  7. 7. function setText(elem, text) { if (! elem.firstChild) { elem.appendChild(document.createTextNode("")); } elem.firstChild.data = text; } function run() { var num = parseInt(document.getElementById("num").value, 10); var result = 0; for (var i = 0; i <= num; i++) { result += i; } // 計算完了 var retElem = document.getElementById("result"); setText(retElem, result.toString()); }
  8. 8. 計算してる間 ブラウザが反応し ない
  9. 9. Web Workersを 使うと解決する
  10. 10. というわけでデモ
  11. 11. Web Workersを 使うとバックグラ ウンドで処理を実 行できる
  12. 12.  Web Workers とは  Web Workers の使 い方  活用できる場面
  13. 13. Web Workers の コードってどうい う風に書くの?
  14. 14. 簡単な例として、 入力した数字まで の合計を計算して みる
  15. 15. まずは HTML ファ イル
  16. 16. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="application/javascript" src="main.js"></script> </head> <body> <h1>計算したい</h1> <p> 1 から <input type="text" id="num" value="10"> までの合計 </p> <button id="run">計算!</button> <p id="result"></p> <p><a href="../index.html">index</a></p> </body> </html>
  17. 17. 普通です。 特に変わったとこ ろは無し。
  18. 18. つぎに、 JavaScript ファイル
  19. 19. main.js worker.js 二つファイルを 作った
  20. 20. main.js worker.js ブラウザ本体側 バックグラウンド処理 計算してくれ ! 計算する 計算したよ ! 表示する
  21. 21. main.js の中身
  22. 22. (function() { function init() { function run() { var num = parseInt(document.getElementById("num").value, 10); // 計算を行うワーカを生成 var worker = new Worker("worker.js"); // ワーカから結果を受け取る worker.onmessage = function(event) { var retElem = document.getElementById("result"); if (! retElem.firstChild) { retElem.appendChild(document.createTextNode("")); } retElem.firstChild.data = event.data; }; // ワーカーに計算させる worker.postMessage(num); } document.getElementById("run"). addEventListener('click', run, false); } window.addEventListener('load', init, false); })();
  23. 23. // バックグラウンドで計算を行う // ワーカを作成する。 // 引数として JavaScript ファイルの // URL を指定する。 var worker = new Worker("worker.js"); // この時点ではまだ計算を開始しない。
  24. 24. // バックグラウンドで計算を開始する // (num には数字が入っている) worker.postMessage(num);
  25. 25. // 計算結果をワーカーから受けとる worker.onmessage = function(event) { // event.data に // 計算結果が入っている // ここで結果を表示する };
  26. 26. worker.js の中身
  27. 27. これがバックグラウ ンドで行われる処理
  28. 28. // バックグラウンド処理を登録する onmessage = function(event) { // main.js の // worker.postMessage(num); // が呼び出されたとき、 // ワーカー側では // この関数が実行される // ... 次のページに続く };
  29. 29. onmessage = function(event) { // event.data に main.js 側で // 指定した数字が入っている var num = event.data; var result = 0; for (var i = 0;i <= num; i++) { result += i; } // 結果を main.js 側に通知する postMessage(result); };
  30. 30. main.js worker.js new Worker() (1) worker が作られる (2) postMessage (3) onmessage (4) postMessage (5) onmessage
  31. 31.  Web Workers とは  Web Workers の使い方  活用できる場面
  32. 32. じゃあ、これって いつ使うの?
  33. 33. 現状では 別にいらない。 無くても大丈夫。
  34. 34. それでも、どん な場面で役に立 つか考えてみた
  35. 35. 1. 画像の処理を する場合
  36. 36. JavaScript で 動的に画像を作 成する
  37. 37. たぶん重たい処 理になる
  38. 38. その間もブラウ ザ本体の操作が できる
  39. 39. 2. ローカルの データを扱う場合
  40. 40. 例えば Web Storage Web Database
  41. 41. クライアント側で データベースを扱 う場合
  42. 42. データベースのア クセスを Web Workers で
  43. 43. 読み書きしている 間もブラウザ本体 の操作ができる
  44. 44. 3. 巨大な数値、 文字列を扱う場合
  45. 45. 例えば データ圧縮 暗号化
  46. 46. もしやるとなった ら、かなり重たい 処理になる
  47. 47. その間も普通のブ ラウザ操作ができ るように
  48. 48. というわけで、現 状では活用例が無 いけど
  49. 49. Web Workers の 登場で、 JavaScript 側に 重たい処理をまか せられる可能性が 出てきた
  50. 50. ひょっとしたら 流行るかもしれ ません
  51. 51. というわけで、 新しい可能性の紹 介でした
  52. 52. ありがとう ございました

×