web-dev-qa-db-ja.com

if-else、switch、またはmapベースのコンディショニングのパフォーマンス

Javascriptの条件付き構造体の以下の実装のパフォーマンスについて疑問に思っていました。

方法1:

 if(id==="camelCase"){
    window.location.href = "http://www.thecamelcase.com";
}else if (id==="jsFiddle"){
    window.location.href = "http://jsfiddle.net/";
}else if (id==="cricInfo"){
    window.location.href = "http://cricinfo.com/";
}else if (id==="Apple"){
    window.location.href = "http://Apple.com/";
}else if (id==="yahoo"){
    window.location.href = "http://yahoo.com/";
}           

方法2:

switch (id) {
case 'camelCase':
    window.location.href = "http://www.thecamelcase.com";
    break;
case 'jsFiddle':
    window.location.href = "http://www.jsfiddle.net";
    break;
case 'cricInfo':
    window.location.href = "http://www.cricinfo.com";
    break;
case 'Apple':
    window.location.href = "http://www.Apple.com";
    break;
case 'yahoo':
    window.location.href = "http://www.yahoo.com";
    break;

}

方法

var hrefMap = {
camelCase : "http://www.thecamelcase.com",
jsFiddle: "http://www.jsfiddle.net",
cricInfo: "http://www.cricinfo.com",
Apple: "http://www.Apple.com",
yahoo: "http://www.yahoo.com"
};
window.location.href = hrefMap[id];

方法4

window.location.href = {
    camelCase : "http://www.thecamelcase.com",
    jsFiddle: "http://www.jsfiddle.net",
    cricInfo: "http://www.cricinfo.com",
    Apple: "http://www.Apple.com",
    yahoo: "http://www.yahoo.com"
}[id];

おそらく方法3と4のパフォーマンスはほぼ同じかもしれませんが、確認のために投稿するだけです。

60
aditya_gaur

この JSBen.ch テストによると、switchセットアップは提供されたメソッド(Firefox 8.0およびChromium 15)の中で最も高速です。

方法3と4の速度は若干遅くなりますが、ほとんど目立ちません。明らかに、if-elseifメソッドはかなり遅い(FireFox 8.0)。

Chromium 15での同じテストでは、これらの方法のパフォーマンスに大きな違いはありません。実際、if-elseifメソッドはChromeで最速のメソッドのようです。

更新

テストケース again を10個の追加エントリとともに実行しました。 hrefmap(方法3および4)は、より良いパフォーマンスを示しています。

関数に比較メソッドを実装する場合、メソッド3は間違いなく勝ちます。マップを変数に保存し、後で再構築するのではなく、この変数を参照します。

62
Rob W

jsPerf 自分でいつでもテストできます。ただし、一般的にルックアップテーブルはデータにアクセスする最も速い方法です。スニペットでは(3)になります。また、switch/caseはほとんどの場合if-else。したがって、あなたの例の順序は

(3)->(4)->(2)->(1)

16
jAndy