Javascript 基于 if-else、switch 或 map 的调节的性能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8624939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Performance of if-else, switch or map based conditioning
提问by aditya_gaur
I was wondering about the performances of the following implementations of conditional structs in javascript.
我想知道 javascript 中条件结构的以下实现的性能。
Method 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/";
}
Method 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;
}
Method 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];
Method 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];
Probably Method 3 and 4 might have almost the same performance but just posting to confirm.
可能方法 3 和方法 4 可能具有几乎相同的性能，但只是发布以进行确认。
回答by Rob W
According to this JSBen.chtest, the switchsetup is the fastest out of the provided methods (Firefox 8.0 and Chromium 15).
根据这个JSBen.ch测试，switch设置是提供的方法中最快的（Firefox 8.0 和 Chromium 15）。
Methods 3 and 4 are slightly less fast, but it's hardly noticeable. Clearly, the if-elseif method is significantly slower (FireFox 8.0).
方法 3 和 4 的速度稍慢，但几乎不明显。显然，if-elseif 方法要慢得多（FireFox 8.0）。
The same test in Chromium 15 does not show significant differences in performance between these methods. In fact, the if-elseif method seems to be the fastest method in Chrome.
Chromium 15 中的相同测试未显示这些方法之间的性能存在显着差异。事实上，if-elseif 方法似乎是 Chrome 中最快的方法。
Update
更新
I have run the test cases again, with 10 additional entries. The hrefmap (methods 3 and 4) show a better performance.
我再次运行了测试用例，还有 10 个额外的条目。hrefmap（方法 3 和 4）表现出更好的性能。
If you want to implement the compare method in a function, method 3 would definitely win: Store the map in a variable, and refer to this variable at a later point, instead of reconstructing it.
如果你想在函数中实现 compare 方法，方法 3 肯定会赢：将映射存储在一个变量中，稍后再引用这个变量，而不是重构它。
回答by jAndy
You can always do a jsPerftest yourself. However, in general a lookup tableis the fastest way to access data. That would be (3)in your snippets. Also, switch/caseis almost always faster than if-else. So the order for your example would be
你总是可以自己做一个jsPerf测试。但是，通常查找表是访问数据的最快方式。这将是(3)在您的片段中。此外，switch/case几乎总是比if-else. 所以你的例子的顺序是
(3)-> (4)-> (2)-> (1)
(3)-> (4)-> (2)-> (1)
回答by Ubermonk
Just thought I'd add this as a possible consideration. I came across this doing research on this very question... http://davidbcalhoun.com/2010/is-hash-faster-than-switch-in-javascript
只是想我会添加这个作为可能的考虑因素。我遇到了这个问题的研究...... http://davidbcalhoun.com/2010/is-hash-faster-than-switch-in-javascript
It takes different engines and browsers into account.
它考虑了不同的引擎和浏览器。
