前端性能优化：循环优化

近段时间在处理前端性能的优化，而优化的重点自然是循环的处理，循环能优化吗？

可以肯定的是可以优化。

核心是数组长度外提，去掉必要的判断。另外避免使用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性能优化小知识总结