前端性能优化：循环优化

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

可以肯定的是可以优化。

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