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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
prototype Element学习笔记(篇二)
Oct 26 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
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水印技术
2007/02/14 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
js倒计时显示实例
2016/12/11 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
python函数装饰器用法实例详解
2015/06/04 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
python内存动态分配过程详解
2019/07/15 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
进口业务员岗位职责
2014/04/06 职场文书
出售房屋委托书范本
2014/09/24 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers