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