wake-up-neo.com

Performance von If-else-, Switch- oder Map-basierten Konditionierungen

Ich habe mich gefragt, wie die folgenden Implementierungen von bedingten Strukturen in Javascript ablaufen.

Methode 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/";
}           

Methode 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;

}

Methode

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];

Methode 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];

Wahrscheinlich haben Methode 3 und 4 möglicherweise fast die gleiche Leistung, senden jedoch nur zur Bestätigung.

60
aditya_gaur

Diesem JSBen.ch Test zufolge ist das Setup von switch die schnellste der bereitgestellten Methoden (Firefox 8.0 und Chromium 15).

Methoden 3 und 4 sind etwas weniger schnell, aber es ist kaum bemerkbar. Die if-elseif-Methode ist deutlich langsamer (FireFox 8.0).

Der gleiche Test in Chrom 15 zeigt keine signifikanten Leistungsunterschiede zwischen diesen Methoden. Tatsächlich scheint die if-elseif-Methode die schnellste Methode in Chrome zu sein.

Aktualisieren

Ich habe die Testfälle wieder mit 10 zusätzlichen Einträgen ausgeführt. Die hrefmap (Methoden 3 und 4) zeigt eine bessere Leistung.

Wenn Sie die Vergleichsmethode in eine Funktion implementieren möchten, würde Methode 3 auf jeden Fall gewinnen: Speichern Sie die Karte in einer Variablen und verweisen Sie zu einem späteren Zeitpunkt auf diese Variable, anstatt sie zu rekonstruieren.

62
Rob W

Sie können jederzeit einen jsPerf Test durchführen. Im Allgemeinen ist eine Nachschlagetabelle der schnellste Weg, auf Daten zuzugreifen. Das wäre (3) in Ihren Ausschnitten. Ebenfalls, switch/case ist fast immer schneller als if-else. Die Reihenfolge für Ihr Beispiel wäre also

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

16
jAndy