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作用域链使用介绍
Aug 29 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
js图片处理示例代码
May 12 Javascript
jquery实现全屏滚动
Dec 28 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
JS中数组重排序方法
Nov 11 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
详解JS浏览器事件循环机制
Mar 27 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
PHP memcache扩展的三种安装方法
2009/04/26 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
axios学习教程全攻略
2017/03/26 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
python中list常用操作实例详解
2015/06/03 Python
python是否适合网页编程详解
2019/10/04 Python
pycharm的python_stubs问题
2020/04/08 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
环保建议书400字
2014/05/14 职场文书
幼儿教师求职信
2014/05/24 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL