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 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
JavaScript中的高级函数
Jan 04 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 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
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
php生成动态验证码gif图片
2015/10/19 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
PHP时间处理类操作示例
2018/09/05 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
python发送邮件实例分享
2017/07/28 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
python sorted函数原理解析及练习
2020/02/10 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
如何利用find命令查找文件
2016/11/18 面试题
安全事故检讨书
2014/01/18 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
说明书范文
2014/05/07 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
给老婆的道歉信
2015/01/20 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript