1. ホーム
  2. javascript

if-else、switch、またはmapベースの条件付けのパフォーマンス

2023-10-14 05:22:37

質問

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;

}

方法3

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はほとんど同じ性能かもしれませんが、確認のために投稿します。

どのように解決するのですか?

これによると JSBen.ch のテストでは switch の設定は、提供された方法の中で最も高速です (Firefox 8.0 と Chromium 15)。

メソッド 3 と 4 はわずかに速度が低下しますが、ほとんど目立ちません。明らかに、if-elseif メソッドは大幅に遅くなります (FireFox 8.0)。

Chromium 15 での同じテストでは、これらのメソッド間の性能に大きな違いはありません。実際、Chrome では if-elseif メソッドが最も高速なメソッドであるようです。

更新情報

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

関数でcompareメソッドを実装したい場合、方法3が間違いなく勝つでしょう。マップを変数に格納し、再構築する代わりに、後の時点でこの変数を参照します。