你的对比是有问题的，应该将你的第一个例子改为

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

someCode...
}

这样才能和第二个进行对比。按照你之前的写法根本不具有对比性，一个是只会循环10次，一个是循环length次，这没有可比性，如同比较水和石头一样，实在难以回复。

如若是换成我上面的写法，那么区别为：在循环体中没有引起数组元素个数变化的情况下，两种是等价的，只是后者缓存了长度，原则上讲效率更高，但是现代浏览器早已对数组长度进行了优化，所以基本是没有区别的，缓存还是不缓存看你个人习惯。如果循环体中有引起数组元素个数变化的情况，那么循环进行的次数前者后和后者就不相同了。

这个比较就可以看出在代码中用变量缓存值的重要性。
把arr.length 的值赋给一个变量，这样在每次判断时就不用浪费时间去计算arr.length了，效率更高。
变量缓存值在这样的代码中体现的不是很直观，当涉及到DOM操作时就显得非常重要了。
比如说要遍历同一个类的节点。

var len = document.getElementsByClassName('item').length;
i < len;

比直接使用 i < document.getElementsByClassName('item').length开销小很多。

第一种是确定具体循环次数，也就是需要循环10次；第二种是对一个数组进行遍历，len是将数组的元素个数缓存下来，方便之后使用。

如果第一种是这种形式

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

someCode...

}

而第二种是这种形式;

for(var i=0,len=arr.length; i<len; i++) {

someCode...

}

第二种更好的原因是，在每次循环的判断中 第一种都要去计算 arr.length 的长度是多少，而第二种已经将 arr.length 的长度赋值给一个变量了，在每次判断时就不用 浪费时间再去计算 arr.length 的长度了，所以第二种减少了第一种的时间开销，效率更高。

如果循环之前读取长度，效果是一样的

var i=0,len=arr.length;
for(;i<len; i++) {
someCode...
}
我觉得这样开销更小写吧

主要是效率上的区别，正如楼上所说缓存length不做重复计算，还有一种是从大到小循环，建议用benchmark把各段代码不同写法测速对比，jsperf好像已经挂了大半年了不然可以看看这个 https://jsperf.com/fors-vs-wh...