Try Webworkers
- 1. Web Workersを 使おう 2010/01/23 mollifier http://d.hatena.ne.jp/mollifier/
- 2. Web Workers とは Web Workers の使い方 活用できる場面
- 3. Web Workers とは Web Workers の使い方 活用できる場面
- 6. 素朴な書き方
- 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()); }
- 10. というわけでデモ
- 12. Web Workers とは Web Workers の使 い方 活用できる場面
- 16. まずは HTML ファ イル
- 17. <!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>
- 21. main.js worker.js ブラウザ本体側 バックグラウンド処理 計算してくれ ! 計算する 計算したよ ! 表示する
- 22. main.js の中身
- 23. (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); })();
- 24. // バックグラウンドで計算を行う // ワーカを作成する。 // 引数として JavaScript ファイルの // URL を指定する。 var worker = new Worker("worker.js"); // この時点ではまだ計算を開始しない。
- 25. // バックグラウンドで計算を開始する // (num には数字が入っている) worker.postMessage(num);
- 26. // 計算結果をワーカーから受けとる worker.onmessage = function(event) { // event.data に // 計算結果が入っている // ここで結果を表示する };
- 27. worker.js の中身
- 29. // バックグラウンド処理を登録する onmessage = function(event) { // main.js の // worker.postMessage(num); // が呼び出されたとき、 // ワーカー側では // この関数が実行される // ... 次のページに続く };
- 30. 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); };
- 31. main.js worker.js new Worker() (1) worker が作られる (2) postMessage (3) onmessage (4) postMessage (5) onmessage
- 32. Web Workers とは Web Workers の使い方 活用できる場面
- 33. じゃあ、これって いつ使うの?
- 36. 1. 画像の処理を する場合
- 38. たぶん重たい処 理になる
- 46. 例えば データ圧縮 暗号化
- 50. Web Workers の 登場で、 JavaScript 側に 重たい処理をまか せられる可能性が 出てきた
- 53. ありがとう ございました