循环声明的性能如何不同

Question

这两个for循环在性能上有何不同？为什么？什么是迭代的最佳方式

var letters=
    ['a','b','c','d','e','f','','','',''];
			var start=new Date()
			for(var i=0,abc=letters.length;i<abc;i++){
				alert(letters[i]);
			}
			var end=new Date()
			alert(end-start)
			var letters1=['a','b','c','d','e','f','','','',''];
			var start1=new Date()
			for(var i=0;i<letters1.length;i++){
				alert(letters1[i]);
			}
			var end1=new Date()
			alert(end1-start1);

Answer 1

正如我在评论测试中提到的警报是绝对无稽之谈，因为它会暂停循环

您可以比较http://jsperf.com/

上的js效果

继承人的结果： 更新：做了一些更好的测试

片段1似乎更好，因为它缓存了letters.length的结果 继续测试：http://jsperf.com/testing-perf-fo-for-loop

Answer 2

在旧浏览器中，在迭代像数组这样的对象时缓存循环的限制几乎总是比每次获取限制（例如 array.length ）快得多。在现代浏览器中，并非如此。

如果迭代的对象是脚本引擎知道在迭代期间可能会发生变化的类型，但缓存通常只会带来显着的性能优势，但不会。

例如，如果迭代live NodeList：

var nodeList = document.getElementsByTagName('*');

for (var i=0, iLen=nodeList.length; i<iLen; i++) {
  // do stuff
}

在浏览器中可测量（如果不明显）的速度快于：

for (var i=0; i<nodeList.length; i++) {
  // do stuff
}

然而，正如其他人所指出的那样，循环中完成的工作可能会更加重要，因此在测试中保存几个周期是没有用的。但是对于一些人来说，他们的标准循环模式包括缓存限制，如果它没有在循环中修改并且总是这样做。

顺便说一句，为了在浏览器中测量时间，有High Resolution Time specification（另见MDN Peformance.now）。