Javascript if-else、switch或map-based调节的性能

我想知道以下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可能具有几乎相同的性能，但只是发布以确认。

您始终可以自己进行测试。但是，一般来说，查找表是访问数据的最快方式。在您的代码片段中，这将是（3）。而且，

开关/case

几乎总是比

if else

快。所以你的例子的顺序是

（3）->（4）->（2）->（1）

根据此测试，在提供的方法（Firefox 8.0和Chromium 15）中，

开关设置是最快的

方法3和4的速度稍慢，但几乎不明显。显然，if-elseif方法的速度要慢得多（FireFox 8.0）

在铬15中进行的相同试验表明，这些方法之间的性能没有显著差异。事实上，if-elseif方法似乎是Chrome中最快的方法

更新
我已经运行了测试用例，添加了10个条目。hrefmap（方法3和4）显示出更好的性能

如果您想在函数中实现compare方法，方法3肯定会成功：将映射存储在一个变量中，并在以后引用这个变量，而不是重新构建它。
我只是想添加这个作为可能的考虑。我在研究这个问题时遇到了这个问题

它考虑了不同的引擎和浏览器。
条件逻辑的性能差异（而不仅仅是值查找）
if-else
vs
switch
vs
map of functions
vs
class-method-dispatch
我想很多人都会问这个问题，if-else、switch或map-based调节的性能，因为他们想知道如何最好地调节逻辑，正如标题所暗示的，而不是简单的基于键的值查找

与公认答案中的答案不同，并纠正了其中的一些缺陷（结果表下方底部的进一步解释）：

测试分支逻辑。i、 e.条件执行流，而不是简单的查找


随机分支。在设置中生成随机的分支键序列。然后用相同的顺序测试每种方法


分支结果不可预测。每个分支的逻辑结果对于其他分支不相同，对于同一分支的后续执行也不相同


有11个分支机构。对我来说，这个问题与很多人更相关。如果有少得多的话，除了“代码”以外的任何其他东西都没有意义。

重复使用的结构在设置中初始化，而不是在基准代码块中初始化


这是我在Safari/macOS上得到的：

方法
JSBench
if-else
100
开关
99+
功能图
~90
类方法分派
~85
这里最慢的事情是传递值，因为stringshere是它的基准：微优化：在浏览器中发生了很多事情，比如js编译、回流、重新绘制和其他，这些都不会影响性能。这就像试图最小化一米一毫米，但是，你有一米，这只是浪费时间和腐化思想。我建议根据环境选择最漂亮的代码，例如，除非使用bind，否则不能对对象方法使用映射。对于优化，你最好使用chrome性能工具，找到真正的瓶颈，并确保你会发现你甚至没有想到的严重问题。是的。结果似乎和我的差不多。但是如果案例数量急剧增加，它们会有所不同吗？我已经扩展了测试，3和4肯定会赢：此外，在现实生活中，这些方法之间不会有任何明显的性能提升，方法3更具可读性，更容易在后期更改，并且效果与条件/数据很好地分离。所以这是双赢的。使用Chrome 62和这个（只创建一次地图），我看不到方法1到3之间有任何一致或显著的差异。我认为测试是有缺陷的。对象映射应该在基准测试设置期间创建，而不是基准测试计时的一部分，因为在现实世界中，它将被用作单例/定义一次并重用。这样做表明mapper显然是赢家：在许多语言中，switch语句都是由编译器翻译成查找表的，因此我认为后者在这些情况下是最快的。但不确定浏览器对JS做了什么。仅仅发布一个链接是没有帮助的。应该从这里的链接中添加相关内容。