前端性能优化：jquery的each为什么比原生的for循环慢很多？

Posted 2020-08-03 xuexiaodong2009

其实查看jQuery的源代码，发现each的代码很简单，但为什么性能和原生的for循环相差几十倍呢？

jQuery的each的核心代码

   for (; i < length; i++) {
            value = callback.call(obj[i], i, obj[i]);
            if (value === false) {
                break;
            }
        }

看着很简单，但为什么会慢很多呢？

编写测试代码如下：

       var length=300000;
        function GetArr() {
            var t = [];
            for (var i = 0; i < length; i++) {
                t[i] = i;
            }
            return t;
        }

        function each1(obj, callback) {
            var i = 0;
            var length = obj.length
            for (; i < length; i++) {
                value = callback(i, obj[i]);
                /* if ( value === false ) {去掉了判断
                     break;
                 }*/
            }
        }
        function each2(obj, callback) {
            var i = 0;
            var length = obj.length
            for (; i < length; i++) {
                value = callback(i, obj[i]);/*去掉了call*/
                if (value === false) {
                    break;
                }
            }
        }
        function each3(obj, callback) {
            var i = 0;
            var length = obj.length
            for (; i < length; i++) {
                value = callback.call(obj[i], i, obj[i]);/*自己写的call*/
                if (value === false) {
                    break;
                }
            }
        }
      
        function Test1() {
            var t = GetArr();
            var date1 = new Date().getTime();
            var lengtharr = t.length;
            var total = 0;
            each1(t, function (i, n) {
                total += n;
            });
            var date12 = new Date().getTime();
            console.log("1Test" + ((date12 - date1)));
        }
        function Test2() {
            var t = GetArr();
            var date1 = new Date().getTime();
            var total = 0;
            each2(t, function (i, n) {
                total += n;
            });
            var date12 = new Date().getTime();
            console.log("2Test" + ((date12 - date1)));
        }
        function Test3() {
            var t = GetArr();
            var date1 = new Date().getTime();
            var total = 0;
            each3(t, function (i, n) {
                total += n;
            });
            var date12 = new Date().getTime();
            console.log("3Test" + ((date12 - date1)));
        }
        function Test4() {
            var t = GetArr();
            var date1 = new Date().getTime();
            var total = 0;
            $.each(t, function (i, n) {
                total += n;
            });
            var date12 = new Date().getTime();
            console.log("4Test" + ((date12 - date1)));
        }

运行测试，发现，第一个和第二个相差不是很大，这说明由于break这个判断导致的性能差异很少，

但第二个和第三个，第四个偏差就就不止一倍了，而第二个和第三个唯一的区别就是调用了call，看来call会导致性能损失，因为call会切换上下文，当然jQuery的each慢还有其他原因，它还在循环中调用了其他的方法，call只是一个原因罢了。

因此可以说call，和apply都是js中比较消耗性能的方法，在性能要求严格时，建议少用。