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 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
JavaScript经典案例之简易计算器
Aug 24 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 HandlerSocket的使用
2011/05/02 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
node.js中的console.error方法使用说明
2014/12/10 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
Vue.set 全局操作简单示例
2019/09/19 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
中科前程Java笔试题
2016/11/20 面试题
自荐书范文范例
2014/02/13 职场文书
2014年教研室工作总结
2014/12/06 职场文书
2015年保管员工作总结
2015/04/30 职场文书
2015年女工委工作总结
2015/07/27 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
python基础详解之if循环语句
2021/04/24 Python
Python装饰器详细介绍
2022/03/25 Python