jQuery的Each比JS原生for循环性能慢很多的原因
其实查看jQuery的源代码，发现each的代码很简单，但为什么性能和原生的for循环相差几十倍呢？
jQuery的each的核心代码
for(;i<length;i++){
value=callback.call(obj[i],i,obj[i]);
if(value===false){
break;
}
}
看着很简单，但为什么会慢很多呢？
编写测试代码如下：
varlength=300000;
functionGetArr(){
vart=[];
for(vari=0;i<length;i++){
t[i]=i;
}
returnt;
}
functioneach1(obj,callback){
vari=0;
varlength=obj.length
for(;i<length;i++){
value=callback(i,obj[i]);
/*if(value===false){去掉了判断
break;
}*/
}
}
functioneach2(obj,callback){
vari=0;
varlength=obj.length
for(;i<length;i++){
value=callback(i,obj[i]);/*去掉了call*/
if(value===false){
break;
}
}
}
functioneach3(obj,callback){
vari=0;
varlength=obj.length
for(;i<length;i++){
value=callback.call(obj[i],i,obj[i]);/*自己写的call*/
if(value===false){
break;
}
}
}
functionTest1(){
vart=GetArr();
vardate1=newDate().getTime();
varlengtharr=t.length;
vartotal=0;
each1(t,function(i,n){
total+=n;
});
vardate12=newDate().getTime();
console.log("1Test"+((date12-date1)));
}
functionTest2(){
vart=GetArr();
vardate1=newDate().getTime();
vartotal=0;
each2(t,function(i,n){
total+=n;
});
vardate12=newDate().getTime();
console.log("2Test"+((date12-date1)));
}
functionTest3(){
vart=GetArr();
vardate1=newDate().getTime();
vartotal=0;
each3(t,function(i,n){
total+=n;
});
vardate12=newDate().getTime();
console.log("3Test"+((date12-date1)));
}
functionTest4(){
vart=GetArr();
vardate1=newDate().getTime();
vartotal=0;
$.each(t,function(i,n){
total+=n;
});
vardate12=newDate().getTime();
console.log("4Test"+((date12-date1)));
}
运行测试，发现，第一个和第二个相差不是很大，这说明由于break这个判断导致的性能差异很少，但第二个和第三个，第四个偏差就就不止一倍了，而第二个和第三个唯一的区别就是调用了call，看来call会导致性能损失，因为call会切换上下文，当然jQuery的each慢还有其他原因，它还在循环中调用了其他的方法，call只是一个原因罢了。
因此可以说call，和apply都是js中比较消耗性能的方法，在性能要求严格时，建议少用。
下面在通过一段代码看下jquery的each和js原生for循环性能对比
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>for与each性能比较</title>
<scriptsrc="../Cks/jquery-1.7.1.min.js"type="text/javascript"></script>
<scripttype="text/javascript"language="javascript">
functiongetSelectLength(){
vartime1=newDate().getTime();
varlen=$("#select_test").find("option").length;
varselectObj=$("#select_test");
for(vari=0;i<len;i++){
if(selectObj.get(0).options[i].text=="111111"){
selectObj.get(0).options[i].selected=true;
break;
}
}
vartime2=newDate().getTime();
alert("for循环执行时间："+(time2-time1));
time1=newDate().getTime();
$("#select_test").find("option").each(function(){
if($(this).text()=="111111"){
$(this)[0].selected=true;
}
});
time2=newDate().getTime();
alert("each循环执行时间："+(time2-time1));
}
</script>
</head>
<body>
<formid="form1"runat="server">
<div><selectid="select_test">
<optionvalue='1'>111111</option>
<optionvalue='2'>222222</option>
<optionvalue='3'>333333</option>
<optionvalue='4'>444444</option>
<optionvalue='5'>5</option>
<optionvalue='6'>6</option>
<optionvalue='7'>7</option>
<optionvalue='8'>8</option>
<optionvalue='9'>9</option>
<optionvalue='10'>10</option>
<optionvalue='11'>11</option>
<optionvalue='12'>12</option>
<optionvalue='13'>13</option>
<optionvalue='14'>14</option>
<optionvalue='15'>15</option>
<optionvalue='16'>16</option>
<optionvalue='17'>17</option>
<optionvalue='18'>18</option>
<optionvalue='19'>19</option>
<optionvalue='20'>20</option>
</select><inputtype="button"value="开始比较"onclick="getSelectLength();"/></div>
<div>
</form>
</body>
</html>
输入出入：
for循环执行时间：1
each循环执行时间：3
两次结果直接说明了问题。
以上所述是小编给大家介绍的jQuery的Each比JS原生for循环性能慢很多的原因，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！