Try Webworkers
Upcoming SlideShare
Loading in...5
×
 

Try Webworkers

on

  • 3,212 views

 

Statistics

Views

Total Views
3,212
Views on SlideShare
2,655
Embed Views
557

Actions

Likes
0
Downloads
3
Comments
0

5 Embeds 557

http://d.hatena.ne.jp 278
http://mollifier.hatenablog.com 269
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 側に 重たい処理をまか せられる可能性が 出てきた
    • ひょっとしたら 流行るかもしれ ません
    • というわけで、 新しい可能性の紹 介でした
    • ありがとう ございました