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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
JS location几个方法小姐
Jul 09 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
php获取图片信息的方法详解
2015/12/10 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
详解JS面向对象编程
2016/01/24 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
python控制台显示时钟的示例
2014/02/24 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
企业厂长岗位职责
2013/12/17 职场文书
绩效工资分配方案
2014/01/18 职场文书
医学类个人求职信范文
2014/02/05 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
趣味运动会广播稿
2014/09/13 职场文书