前端性能优化：循环优化

近段时间在处理前端性能的优化，而优化的重点自然是循环的处理，循环能优化吗？
可以肯定的是可以优化。
核心是数组长度外提，去掉必要的判断。另外避免使用for in的循环，更不要使用封装过的循环。
使用基本的for循环性能是for in的的好多倍，谷歌里边相差10几倍，IE10里边相差三倍，对于复杂的数据类型的就偏差更大了
注意把数组的长度定位的循环外边，避免反复读取
测试代码：
var length = 30000;
/*原始循环*/
function Test1() {
var t = [];
for (var i = 0; i < length; i++) {
t[i] = i;
}
var date1 = new Date().getTime();
var total = 0;
var lengtharr = t.length;
for (var i = 0; i < lengtharr; i++) {
total += t[i];
}
var date12 = new Date().getTime();
console.log("1Test" + ((date12 - date1)));
}
/*for in循环*/
function Test2() {
var t = [];
for (var i = 0; i < length; i++) {
t[i] = i;
}
var date1 = new Date().getTime();
var total = 0;
for (item in t) {
total += item;
}
var date12 = new Date().getTime();
console.log("2Test" + ((date12 - date1)));
}
/*jQuery的each循环*/
function Test3() {
var t = [];
for (var i = 0; i < length; i++) {
t[i] = i;
}
var date1 = new Date().getTime();
var total = 0;
$.each(t, function (i, n) {
total += n;
});
var date12 = new Date().getTime();
console.log("3Test" + ((date12 - date1)));
}

测试发现原始的for循环是最快的，在谷歌50中比for in循环快20多陪，比jQuery的each循环快4倍。

在IE10中原始的for循环也是是最快的，比for in循环快3多陪，比jQuery的each循环快6倍。
这些还是最原始的类型，如果是复杂的对象类型，相差就更大了。
分析下jQuery的each代码：
可以看到多了很多判断，而且在循环中使用了call,apply切换作用域，还有在某些情况下跳出循环的判断break;另外构造一个jQuery对象，等都需要花费时间，如果再进一步跟踪进去发下call,还调用了其他函数，因此慢的就很正常了。
each: function( obj, callback, args ) {
var value,
i = 0,
length = obj.length,
isArray = isArraylike( obj );//方法调用

if ( args ) {//判断
if ( isArray ) {//判断
for ( ; i < length; i++ ) {
value = callback.apply( obj[ i ], args );

if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.apply( obj[ i ], args );

if ( value === false ) {
break;
}
}
}

// A special, fast, case for the most common use of each
} else {
if ( isArray ) {//判断
for ( ; i < length; i++ ) {
value = callback.call( obj[ i ], i, obj[ i ] ); //循环内切换作用域
if ( value === false ) {////循环内的判断
break;
}
}
} else {
for ( i in obj ) {
value = callback.call( obj[ i ], i, obj[ i ] );

if ( value === false ) {
break;
}
}
}
}

return obj;
}

JavaScript性能优化小知识总结