Post on 31-May-2015
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.jsworker.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
new Worker()
(4) postMessage
(5) onmessage
(3) onmessage
(2) postMessage
worker.js
(1) worker が作られる
Web Workers とは Web Workers の使い方 活用できる場面
じゃあ、これっていつ使うの?
現状では別にいらない。無くても大丈夫。
それでも、どんな場面で役に立つか考えてみた
1. 画像の処理をする場合
JavaScript で動的に画像を作成する
たぶん重たい処理になる
その間もブラウザ本体の操作ができる
2. ローカルのデータを扱う場合
例えばWeb StorageWeb Database
クライアント側でデータベースを扱う場合
データベースのアクセスをWeb Workers で
読み書きしている間もブラウザ本体の操作ができる
3. 巨大な数値、文字列を扱う場合
例えばデータ圧縮暗号化
もしやるとなったら、かなり重たい処理になる
その間も普通のブラウザ操作ができるように
というわけで、現状では活用例が無いけど
Web Workers の登場で、JavaScript 側に重たい処理をまかせられる可能性が出てきた
ひょっとしたら流行るかもしれません
というわけで、新しい可能性の紹介でした
ありがとうございました