jQuery的Each比JS原生for循环性能慢很多的原因


Posted in Javascript onJuly 05, 2016

其实查看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中比较消耗性能的方法,在性能要求严格时,建议少用。

下面在通过一段代码看下jquery的each和js原生for循环性能对比

<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循环执行时间:" + (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循环执行时间:" + (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="开始比较" onclick="getSelectLength();" /></div> 
<div> 
</form> 
</body> 
</html>

输入出入:

for循环执行时间:1
each循环执行时间:3

两次结果直接说明了问题。

以上所述是小编给大家介绍的jQuery的Each比JS原生for循环性能慢很多的原因,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
js实现常见的工具条效果
Mar 02 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
Node.js实现文件上传
Jul 05 #Javascript
JavaScript数组方法大全(推荐)
Jul 05 #Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 #Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 #Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 #Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 #Javascript
Bootstrap实现水平排列的表单
Jul 04 #Javascript
You might like
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
python发腾讯微博代码分享
2014/01/10 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
python实现的发邮件功能示例
2019/09/11 Python
python图形用户接口实例详解
2019/12/16 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
关于毕业的广播稿
2014/01/10 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
倡导文明标语
2014/06/16 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
高温慰问简报
2015/07/21 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle