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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
eslint 的三大通用规则详解
May 16 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
小程序自定义轮播图圆点组件
Jun 25 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简单实现MVC
2015/02/05 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
详解Numpy中的广播原则/机制
2018/09/20 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
主题实践活动总结
2014/05/08 职场文书
承诺书范文
2014/06/03 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
暂住证证明
2015/06/19 职场文书
会议室使用管理制度
2015/08/06 职场文书