當前位置:編程學習大全網 - 源碼下載 - jquery中使用each()和for循環哪個好些

jquery中使用each()和for循環哪個好些

jquery的each比原生的for循環慢很多!!為什麽?

其實查看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中比較消耗性能的方法,在性能要求嚴格時,建議少用。

  • 上一篇:如何使用excel2013做數據透視表
  • 下一篇:淘客帝國的程序簡介
  • copyright 2024編程學習大全網