快捷導(dǎo)航

jQuery的Each比JS原生for循環(huán)性能慢很多的原因

更新時(shí)間：2016年07月05日 14:49:30 作者：xuexiaodong2009

這篇文章主要介紹了jQuery的Each比JS原生for循環(huán)性能慢很多的原因的相關(guān)資料,需要的朋友可以參考下

其實(shí)查看jQuery的源代碼，發(fā)現(xiàn)each的代碼很簡(jiǎn)單，但為什么性能和原生的for循環(huán)相差幾十倍呢？

jQuery的each的核心代碼

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

看著很簡(jiǎn)單，但為什么會(huì)慢很多呢？

編寫測(cè)試代碼如下：

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))); 
}

運(yùn)行測(cè)試，發(fā)現(xiàn)，第一個(gè)和第二個(gè)相差不是很大，這說(shuō)明由于break這個(gè)判斷導(dǎo)致的性能差異很少，但第二個(gè)和第三個(gè)，第四個(gè)偏差就就不止一倍了，而第二個(gè)和第三個(gè)唯一的區(qū)別就是調(diào)用了call，看來(lái)call會(huì)導(dǎo)致性能損失，因?yàn)閏all會(huì)切換上下文，當(dāng)然jQuery的each慢還有其他原因，它還在循環(huán)中調(diào)用了其他的方法，call只是一個(gè)原因罷了。

因此可以說(shuō)call，和apply都是js中比較消耗性能的方法，在性能要求嚴(yán)格時(shí)，建議少用。

下面在通過(guò)一段代碼看下jquery的each和js原生for循環(huán)性能對(duì)比

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>for與each性能比較</title> 
<script src="../Cks/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
function getSelectLength() { 
var time1 = new Date().getTime(); 
var len = $("#select_test").find("option").length; 
var selectObj = $("#select_test"); 
for (var i = 0; i < len; i++) { 
if (selectObj.get(0).options[i].text == "111111") { 
selectObj.get(0).options[i].selected = true; 
break; 
} 
} 
var time2 = new Date().getTime(); 
alert("for循環(huán)執(zhí)行時(shí)間：" + (time2 - time1)); 
time1 = new Date().getTime(); 
$("#select_test").find("option").each(function () { 
if ($(this).text() == "111111") { 
$(this)[0].selected = true; 
} 
}); 
time2 = new Date().getTime(); 
alert("each循環(huán)執(zhí)行時(shí)間：" + (time2 - time1)); 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div><select id="select_test"> 
<option value='1'>111111</option> 
<option value='2'>222222</option> 
<option value='3'>333333</option> 
<option value='4'>444444</option> 
<option value='5'>5</option> 
<option value='6'>6</option> 
<option value='7'>7</option> 
<option value='8'>8</option> 
<option value='9'>9</option> 
<option value='10'>10</option> 
<option value='11'>11</option> 
<option value='12'>12</option> 
<option value='13'>13</option> 
<option value='14'>14</option> 
<option value='15'>15</option> 
<option value='16'>16</option> 
<option value='17'>17</option> 
<option value='18'>18</option> 
<option value='19'>19</option> 
<option value='20'>20</option> 
</select><input type="button" value="開(kāi)始比較" onclick="getSelectLength();" /></div> 
<div> 
</form> 
</body> 
</html>

輸入出入：

for循環(huán)執(zhí)行時(shí)間：1
each循環(huán)執(zhí)行時(shí)間：3

兩次結(jié)果直接說(shuō)明了問(wèn)題。

以上所述是小編給大家介紹的jQuery的Each比JS原生for循環(huán)性能慢很多的原因，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: