为循环优化 JavaScript 真的有必要吗？

Question

我读到not reading the length attribute of an array every iteration in the loop header 建议优化 JavaScript 中的循环。

所以，我们应该这样做：

var names = ['George','Ringo','Paul','John'];
for(var i=0,j=names.length;i<j;i++){// Read array length once and assign it to a variable
    doSomeThingWith(names[i]);
}

而不是这个：

var names = ['George','Ringo','Paul','John'];
for(var i=0;i<names.length;i++){
    doSomeThingWith(names[i]);
}

但是，我created a small testcase 比较了这两种技术，但有时第一种情况更快，有时第二种情况。

您会推荐哪个版本？

Answer 1

首先，我应该说这个答案是在 2011 年写的，这些东西会随着时间而变化（随着浏览器解释器优化越来越多的东西），所以如果你真的想知道世界的当前状态，你必须运行测试在当前浏览器上。

在任何版本的 IE 上运行您的 own jsperf test。在那里，您将看到两种方法或许多其他旧浏览器之间的一致差异。您显然只在 Chrome 上运行它，它是如此之快且如此优化，以至于这两种方法之间的差异可以忽略不计。在 IE9 上（可能比 IE7 和 IE8 更好），预缓存长度的方法快 31%。

A jsperf test designed for this question 给出了这个问题的定量结果。在这样的问题中，应该去 jsperf 看看真正的区别是什么，而不是过多的猜测。

它显示了我尝试过的浏览器的差异，从几乎没有差异到相当大的差异，具体取决于浏览器。 在 Chrome 中，几乎没有区别。在 IE9 中，首先存储长度几乎快 50%。

现在，这种速度差异对您的脚本是否重要取决于具体的代码。如果您有一个经常循环的庞大数组，则在某些浏览器中使用此表单可能会产生有意义的差异：

for (var i = 0, len = list.length; i < len; i++) {
    // do code here
} 

在slightly different test case 中，当使用某些 DOM 函数返回的实时伪数组时，速度仍然存在差异，但没有被放大（我预计 DOM 伪实时数组的差异会更大，但事实并非如此)。

在实践中，当我认为我的代码部分对速度不是很重要和/或数组不大时，我倾向于使用短版本（少打字），我会使用预缓存的较长版本如果我有意识地考虑速度，或者数组很大，或者我正在对同一个数组进行大量迭代，那么长度。

预缓存长度还有其他几个编程原因。如果您将在循环期间将元素添加到数组的末尾并且您不希望循环遍历那些新添加的元素，那么您将需要预加载长度并仅遍历最初存在的元素.

for (var i = 0, len = list.length; i < len; i++) {
    if (list[i] == "whatever") {
        list.push("something");
    }
} 

请记住，浏览器在不断发展并添加越来越多的优化，因此在 2011 年显示出巨大优势的优化可能会在未来基本上内置到更现代的浏览器中，因此不再需要手动编码优化。所以，如果你想针对今天的性能优化某些东西，你必须在今天的浏览器中进行测试，你不能仅仅依赖于你阅读的可能有几年历史的东西。

Answer 2

这个建议充其量只是一个微优化，并且所有工作都在 Javascript 引擎的速度上完成，它不太可能再产生可衡量的差异。也许在一个很长很紧的循环中的某个地方可能会有所作为，但我对此表示怀疑。

出于某种原因，程序员倾向于将速度放在首位，即使它是没有根据的。考虑正确性，然后考虑可读性。

Answer 3

我会推荐第二个：

var names = ['George','Ringo','Paul','John'];
for (var i = 0; i < names.length; i++) {
  doSomeThingWith(names[i]);
}

因为它更简洁，更惯用。除非您进行一些荒谬的微优化，否则您永远不需要使用第一个。

Answer 4

作为一般规则，缓存循环的“停止值”（在您的情况下为 names.length）只有在它是计算值时才有价值。对于有问题的数组，它只是一个查找，所以缓存它不会有什么好处。

Answer 5

定义"really necessary"。
如果你遍历一个包含 4 个元素的数组，我认为即使是 IE 也不会介意，但请记住，你可能必须遍历一些 dom 元素；假设您有一个列表 (ul)，其中包含 1.000.000 个（或更多）入口 (li)。我认为声明一个额外的变量可以节省您检查该 ul 的长度属性一百万次。
也许我用百万部分夸大了一点，但请看一下仅 10000 li 上的 test results。
优化后的循环几乎比“正常”的快一百倍。

我的结论：优化你的循环......它不会伤害你（或你的代码或你的浏览器）。

Answer 6

我会推荐

var names = ['George','Ringo','Paul','John'];
var length = names.length;
for(var i=0;i<length;i++){
    doSomeThingWith(names[i]);
}

Answer 7

2017 年更新答案

您应该使用优化/最佳实践方式。

在您的确切示例中：它是如此微不足道，以至于无关紧要。正如@jfriend00 所说，即使有 50% 的性能差异，也没有多大意义。 CPU（包括当前的智能手机）每秒可以进行数百万次计算。这意味着毫秒甚至不会向用户注册，这与@Ned Batchelder 发布的内容一致。

但是，编码不应该是关于你可以逃避的事情。也就是说，正如@DwB 所说，“......停止价值......只有当它是计算值时才有价值。”考虑到这一点，以下代码给出了一个返回停止值的浪费时间函数的示例。在这里，速度有多么不同就变得很明显了。将服务器、复杂的客户端代码和其他密集计算的潜在缺点相乘，您将通过使用最佳实践来改善用户体验。

		var eCount = document.getElementById("loopCount");
		var waitDiv = document.getElementById("waitDiv");
		var runButton = document.getElementById("runButton");
		var interCount = eCount.value.replace(/\D/g,'');
		var names = ['George','Ringo','Paul','John'];
		
		eCount.addEventListener("input", function(){			
			var value = parseInt(this.value.replace(/\D/g,'')).toLocaleString();
			this.value = value.toLocaleString();
		});


		function runLoop(){			
			interCount = eCount.value.replace(/\D/g,'');
			waitImg(true);
			setTimeout(function(){
				var cachedTime = loopTest("cached");
				var inlineTime = loopTest("inline");
				document.getElementById( "cached" ).innerText = cachedTime+" Cached";
				document.getElementById( "inline" ).innerText = inlineTime+" Not Cached";
				waitImg(false);
			}, 100); // delay to allow update of DOM with waitimg gif
			
		}
		
		function loopTest(meth){
			var worthlessVariable = 0;
			var t0 = performance.now();			
			if( meth == "cached" ){
				for( var i = 0, len = busyCalulations(); i < len; i++) {
					worthlessVariable = i;
				}
			}else{
				for( var i = 0; i < busyCalulations(); i++) {
					worthlessVariable = i;
				}
			}
			var t1 = performance.now();
			return (t1 - t0);
		}

		
		function busyCalulations(){
			// garbage math to simulate doing something
			// it returns interCount after some pointless math
			var limit = Math.floor(Math.random() * 20) + 20;
			return interCount*(limit*names.length)/(limit*names.length);
		}
		
		
		function waitImg(txt){ // display wait timer
			if (txt === true){
				waitDiv.style.visibility = "visible";
				runButton.style.visibility = "hidden";
			}else{
				waitDiv.style.visibility = "hidden";
				runButton.style.visibility = "visible";
			}
		}

	<h1>Loop Tester</h1>
<form onSubmit="return false;">
	Loop Length <input id="loopCount" type="text" value="100,000"><br>
	<br><br>
	<button id="runButton" onClick="runLoop();">Run Test</button>
	<div id="waitDiv" style="visibility: hidden"><img src="https://i.stack.imgur.com/5qXc3.gif"></div>
	<br><br>
	</form>
	<div><p>Times are in milliseconds</p>
		<div id="cached"></div>
		<div id="inline"></div>
	</div>

Answer 8

请参考this 的帖子，里面谈到了优化 JS 循环。

所以一个简单的解决方案是：

let arr = ["a", "b", "c", "d", "e"]
let i = arr.length
while(i--) {
   callFn();
}

与其他传统循环技术（如

）相比，上述代码运行速度更快

for(let i = 0; i < arr.length; i++) {}

因为上面的代码必须在每次迭代时获取arr.length。