Try Webworkers
Upcoming SlideShare
Loading in...5
×
 

Try Webworkers

on

  • 3,250 views

 

Statistics

Views

Total Views
3,250
Views on SlideShare
2,688
Embed Views
562

Actions

Likes
0
Downloads
3
Comments
0

5 Embeds 562

http://d.hatena.ne.jp 278
http://mollifier.hatenablog.com 274
http://www.slideshare.net 7
http://webcache.googleusercontent.com 2
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Try Webworkers Try Webworkers Presentation Transcript

  • Web Workersを 使おう  2010/01/23  mollifier  http://d.hatena.ne.jp/mollifier/
  •  Web Workers とは  Web Workers の使い方  活用できる場面
  •  Web Workers とは  Web Workers の使い方  活用できる場面
  • Web Workersは、 新しいJavaScript の機能
  • 例えば、 JavaScriptで 足し算したい場合
  • 素朴な書き方
  • 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()); }
  • 計算してる間 ブラウザが反応し ない
  • Web Workersを 使うと解決する
  • というわけでデモ
  • Web Workersを 使うとバックグラ ウンドで処理を実 行できる
  •  Web Workers とは  Web Workers の使 い方  活用できる場面
  • Web Workers の コードってどうい う風に書くの?
  • 簡単な例として、 入力した数字まで の合計を計算して みる
  • まずは HTML ファ イル
  • <!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>
  • 普通です。 特に変わったとこ ろは無し。
  • つぎに、 JavaScript ファイル
  • main.js worker.js 二つファイルを 作った
  • main.js worker.js ブラウザ本体側 バックグラウンド処理 計算してくれ ! 計算する 計算したよ ! 表示する
  • main.js の中身
  • (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); })();
  • // バックグラウンドで計算を行う // ワーカを作成する。 // 引数として JavaScript ファイルの // URL を指定する。 var worker = new Worker("worker.js"); // この時点ではまだ計算を開始しない。
  • // バックグラウンドで計算を開始する // (num には数字が入っている) worker.postMessage(num);
  • // 計算結果をワーカーから受けとる worker.onmessage = function(event) { // event.data に // 計算結果が入っている // ここで結果を表示する };
  • worker.js の中身
  • これがバックグラウ ンドで行われる処理
  • // バックグラウンド処理を登録する onmessage = function(event) { // main.js の // worker.postMessage(num); // が呼び出されたとき、 // ワーカー側では // この関数が実行される // ... 次のページに続く };
  • 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); };
  • main.js worker.js new Worker() (1) worker が作られる (2) postMessage (3) onmessage (4) postMessage (5) onmessage
  •  Web Workers とは  Web Workers の使い方  活用できる場面
  • じゃあ、これって いつ使うの?
  • 現状では 別にいらない。 無くても大丈夫。
  • それでも、どん な場面で役に立 つか考えてみた
  • 1. 画像の処理を する場合
  • JavaScript で 動的に画像を作 成する
  • たぶん重たい処 理になる
  • その間もブラウ ザ本体の操作が できる
  • 2. ローカルの データを扱う場合
  • 例えば Web Storage Web Database
  • クライアント側で データベースを扱 う場合
  • データベースのア クセスを Web Workers で
  • 読み書きしている 間もブラウザ本体 の操作ができる
  • 3. 巨大な数値、 文字列を扱う場合
  • 例えば データ圧縮 暗号化
  • もしやるとなった ら、かなり重たい 処理になる
  • その間も普通のブ ラウザ操作ができ るように
  • というわけで、現 状では活用例が無 いけど
  • Web Workers の 登場で、 JavaScript 側に 重たい処理をまか せられる可能性が 出てきた
  • ひょっとしたら 流行るかもしれ ません
  • というわけで、 新しい可能性の紹 介でした
  • ありがとう ございました