#XMLHttpRequestをWebWorkerで実行する
Senchaが公開したHTML5のFacebookクライアント、Fastbookの高速化手法として、
XMLHttpRequestをWebWorkerで実行するのがあるそうです。
ということで、実際にやってみました。
##WebWorkerの呼び出し
jQueryを用いた環境で使いやすいように、jQueryの$.ajaxインターフェイスに似せています。
ただし、XMLHttpRequestをWebWorkerからは取得できないので、全く一緒ではありません。
###ExecutorServiceの実装
WebWorkerを大量に作成すると負荷がかかるので、
少し手間ですが、同時実行数を制限し、リクエストをキューイングする
ExecutorServiceを実装します。
jquery.ajax.js
var ExecutorServece = (function() {
ExecutorServece.prototype.maxThreads = 5;
function ExecutorServece(path, maxThreads) {
this.path = path;
this._queue = [];
this._pool = [];
this._running = 0;
if (maxThreads) this.maxThreads = maxThreads;
}
ExecutorServece.prototype.execute = function(message, options) {
if (this._running >= this.maxThreads) {
return this._queue.push(arguments);
} else {
return this._execute.apply(this, arguments);
}
};
ExecutorServece.prototype._execute = function(message, options) {
var context, onComplete, onError, onMessage, worker,
_this = this;
++this._running;
worker = this._pool.shift() || new Worker(this.path);
context = options.context || this;
onMessage = function(ev) {
if (options.success) options.success.apply(context, ev.data);
return onComplete(ev);
};
onError = function(ev) {
if (options.error) options.error.apply(context, ev.data);
return onComplete(ev);
};
onComplete = function(ev) {
if (options.complete) options.complete.apply(context, ev.data);
_this._release(worker, onMessage, onError);
return _this._dequeue();
};
worker.addEventListener('message', onMessage, false);
worker.addEventListener('error', onError, false);
return worker.postMessage(message);
};
ExecutorServece.prototype._release = function(worker, onMessage, onError) {
worker.removeEventListener('message', onMessage, false);
worker.removeEventListener('error', onError, false);
this._pool.push(worker);
return --this._running;
};
ExecutorServece.prototype._dequeue = function() {
var args;
args = this._queue.shift();
if (args) return this._execute.apply(this, args);
};
return ExecutorServece;
})();
###ExecutorServiceインスタンスの作成
ExecutorServiceの第一引数はWebWorkerのJSのパス、第二引数は同時接続数（任意）です。
なお、同時接続数のデフォルト値は5です。
jquery.ajax.js
var AjaxService = new ExecutorServece('/js/workers/xhr.js');
###WebWorkerの実行
WebWorkerの実行は、ExecutorServiceインスタンスのexecuteメソッドを通して行います。
executeメソッドの第一引数messageは、WebWorkerに送られるオブジェクトです。
このオブジェクトにXMLHttpRequestが送信するURLやデータ、HTTPHeaderなどを指定します。
executeメソッドの第二引数には、成功やエラーなどのハンドラを定義します。
また、ハンドラが実行されるときのthisキーワードを指定できるcontextもこちらに指定できます。
最後に、jQuery環境で扱いやすいように、jQuery.ajaxのラッパーを作成しています。
jquery.ajax.js
(function($) {
option_keys = ['type', 'url', 'data', 'dataType', 'contentType', 'headers'];
defaults = {};
$.ajaxSetup = function(options) {
var key, value, _results;
_results = [];
for (key in options) {
value = options[key];
_results.push(defaults[key] = value);
}
return _results;
};
$.ajax = function(options) {
var beforeSend, key, message, success, _i, _len, _success;
beforeSend = options.beforeSend || defaults.beforeSend;
if (beforeSend && beforeSend === false) return;
message = {};
for (_i = 0, _len = option_keys.length; _i < _len; _i++) {
key = option_keys[_i];
message[key] = options[key] || defaults[key];
}
_success = options.success || defaults.success;
if (options.dataFilter) {
success = function() {
var context;
context = options.context || this;
arguments[0] = options.dataFilter.apply(context, arguments);
return _success.apply(context, arguments);
};
} else {
success = _success;
}
AjaxService.execute(message, {
success: success,
error: options.error || defaults.error,
complete: options.complete || defaults.complete,
context: options.context
});
};
})(jQuery);
##WebWorkerの実装
WebWorker側では、呼び出し元のオブジェクトを元にXMLHttpReqeustを作成し、送信します。
あらかじめ、返却するデータの種類毎にハンドラを作成しておき、
呼び出し元のオブジェクトのdataTypeに応じて切り替えます。
workers/xhr.js
var onLoad = function (callback) {
return function onLoad() {
if (this.readyState === 4) {
if (this.status === 200) {
callback.call(this, this);
} else {
var msg = 'error';
throw [this, msg];
}
}
};
},
postImage = onLoad(function(xhr) {
var blob = new Blob([xhr.response]),
reader = new FileReader();
reader.onload = function(ev) {
var data = ev.target.result;
data = data.replace('data:;', 'data:'+ xhr.getResponseHeader('Content-Type') + ';');
postMessage([data, 'image']);
};
reader.readAsDataURL(blob);
}),
postXML = onLoad(function(xhr) {
postMessage(xhr.responseXML, 'xml');
}),
postJSON = onLoad(function(xhr) {
postMessage(JSON.parse(xhr.responseText), 'json');
}),
postText = onLoad(function(xhr) {
postMessage(xhr.responseText, 'text');
});
addEventListener('message', function(ev) {
var options = ev.data,
xhr = new XMLHttpRequest();
xhr.open (options.type || "GET", options.url);
if (options.contentType) {
if (!options.headers) options.headers = {};
options.headers['Content-Type'] = options.contentType;
}
if (options.headers) {
for (var name in options.headers) {
xhr.setRequestHeader(name, options.headers[name]);
}
}
switch (options.dataType && options.dataType.toLowerCase()) {
case 'binary':
case 'image':
xhr.responseType = "blob";
xhr.onreadystatechange = postImage;
break;
case 'json':
xhr.onreadystatechange = postJSON;
break;
case 'xml':
xhr.onreadystatechange = postXML;
break;
default:
xhr.onreadystatechange = postText;
}
xhr.send (options.data);
}, false);
##リクエストの送信
リクエストの送信はjQuery.ajaxメソッドとほぼ同じです。
※一部対応していないオプションがあります。
以下のサンプルでは、jQuery.ajaxでサポートしていない画像をbase64エンコードされたデータを取得して、Imageオブジェクトを作成しています。
test.js
function TestLoadImageWebWorker() {
var _this = this;
this.start = new Date().getTime();
this.log = function() {
return _this.constructor.prototype.log.apply(_this, arguments);
};
}
TestLoadImageWebWorker.prototype.log = function() {
var end;
end = new Date().getTime();
return console.log('TestLoadImage: ' + (end - this.start));
};
TestLoadImageWebWorker.prototype.load = function(url) {
return $.ajax({
url: url,
dataType: 'image',
contentType: 'image/jpeg',
success: this._dataToImage,
context: this
});
};
TestLoadImageWebWorker.prototype._dataToImage = function(base46Data) {
this.image = new Image;
this.image.onload = this.log;
return this.image.src = base46Data;
};
$(function() {
var i, runner, _results;
runner = new TestLoadImageWebWorker;
for (i = 1; i <= 1000; i++) {
runner.load('/img/88-1.jpg?' + i));
}
});
実行速度は通常の画像読み込みとはさほど差はありません。
ただし、別スレッドで実行されるのでメインスレッドに負荷をかけません。
リクエストを送信しても、UIを操作させる場合に有用です。
iPhoneのネイティブアプリでもNSURLConnectionを非同期でバックグラウンドスレッドで実行することで、通信の高速化を実現しているので、それと同様なのでしょう。