JavaScriptパフォーマンスベストプラクティスその６

Nokia Developerより

クライアント-サーバー通信

XMLHttpRequestにタイムアウトを設定すること

• ブラウザはXHR requestをある時間後タイムアウトするが、スクリプトの制御下で接続を中断することが有益なことがある。これはsetTimeout()を使って XHRコールにタイムアウトを加えることによって実現可能だ。

• Browsers will timeout XHR requests after some time, but sometimes it is beneficial to abort the connection under script control. This can be done by adding timeouts to XHR calls using setTimeout().

var xhr = new XMLHttpRequest ();
xhr.open('GET', url, false);
xhr.onreadystatechange = function () {
    if (this.readyState == 4) {                    
        clearTimeout(timeout);
        // do something with response data
    }
}
var timeout = setTimeout( 
    function () {
        xhr.abort();
        // call error callback
    },
    60*1000 // timeout after a minute
);
xhr.send();

大きなデータセットのためには、XMLやJSONの代替としてカスタムデータ交換フォーマットの使用を検討すること

• ブラウザやバージョン、OSに依って、XMLやJSONのパースや横断のパフォーマンスの違いは非常に大きいかもしれない。例えば、Nokia 5800 XpressMusic上で非常に大きなデータセットを扱うと、JSONがだいたい5倍速い。
• XMLやJSONではなく、文字列ベースのカスタムのデータフォーマット(CSVを想像せよ)は転送バイトとパース時間の点から大きなデータセットでは効率的だ。
• JavaScriptのStringやRegExpのメソッドを使って、ファイルサイズのオーバーヘッドを可能な限り小さくしながら、ネイティブに実行されるJSONの速度に匹敵することができる。

Depending on the browser, its version and OS, the performance difference between XML or JSON parsing and traversing may be very significant. For example, on Nokia 5800 XpressMusic with a very large dataset JSON is approx. 5x faster.
Using a custom string-based data format (think CSV) over XML and JSON is efficient in terms of transferred bytes and parse time with large datasets.
Using JavaScript’s String and RegExp methods one can match the speed of JSON executed natively with as little overhead to the file size as possible.

JSON: {{{1}}}

カスタムデータフォーマットとStringとRegExpメソッドを使った等価なもの:

that.contacts = o.responseText.split("\\c");
 
for (var n = 0, len = that.contacts.length, contactSplit; n < len; n++) {
 
   contactSplit = that.contacts[n].split("\\a");
 
   that.contacts[n] = {};
   that.contacts[n].n = contactSplit[0];
   that.contacts[n].e = contactSplit[1];
   that.contacts[n].u = contactSplit[2];
   that.contacts[n].r = contactSplit[3];
   that.contacts[n].s = contactSplit[4];
   that.contacts[n].f = contactSplit[5];
   that.contacts[n].a = contactSplit[6];
   that.contacts[n].d = contactSplit[7];
   that.contacts[n].y = contactSplit[8];
}

ソース:

• Building Fast Client-side Searches
• Native JSON Support is Required