Download to read offline
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 の使い方 活用できる場面
- 4.
- 5.
- 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()); }
- 8.
- 9.
- 10.
- 11.
- 12. Web Workers とは Web Workers の使 い方 活用できる場面
- 13.
- 14.
- 16.
- 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>
- 18.
- 19.
- 20.
- 21. main.js worker.js ブラウザ本体側 バックグラウンド処理 計算してくれ ! 計算する 計算したよ ! 表示する
- 22.
- 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.
- 28.
- 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.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. Web Workers の 登場で、 JavaScript側に 重たい処理をまか せられる可能性が 出てきた
- 51.
- 52.
- 53.