jQuery的Each比JS原生for循环性能慢很多的原因

其实查看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循环性能慢很多的原因，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 全面解析JavaScript里的循环方法之forEach，for-in，for-of

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.length; index++) { console.log(m

  • JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)

    废话不多说了,直接给大家贴代码了. // 每隔五秒定时刷新当前窗口 setTimeout("self.location.reload();",5000); //js 定时关闭窗口(ie和FF中测试过) //6秒后自动关闭当前窗口 setTimeout("window.opener=null;window.close()",6000); 下面给大家介绍下javascript定时器使用 使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方

  • JavaScript中setTimeout和setInterval函数的传参及调用

    如何向 setTimeout . setInterval 传递参数 看如下代码: var str = 'aaa'; var num = 2; function auto(num){ alert(num); } setTimeout('auto(num)',4000); 这样写是可以正常工作的,但是如其说这是参数传递,还不如说是直接使用的全局变量.所以,这种写法是没有必要的,一般情况下更多的是用到传递局部变量作为参数. 把代码修改一下: //var str = 'aaa'; var num = 2

  • 浅谈JavaScript for循环 闭包

    有个网友问了个问题,如下的html,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5. <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> <script type="text/javascript&quo

  • for循环 + setTimeout 结合一些示例(前端面试题）

    一.背景 最近在翻看以前的老书<node.js开发指南>,恰好碰到 for 循环 + setTimeout 的经典例子,于是重新梳理了思路并记录下. 二.写在前面,setTimeout 和 setInterval 的执行机制 在日常编码中,你会发现,给 setTimeout 和 setInterval 设定延迟时间往往并不准,或者干脆 setTimeout(function(){xxx},0) 也不是立马执行(特别是有耗时代码在前),这是因为 js 是单线程的,有一个事件队列机制,setTim

  • JavaScript中关于for循环删除数组元素内容时出现的问题

    JavaScript中关于for循环删除数组元素内容时出现的问题

    昨天用for循环进行数组去重的时候出现的问题, 首先,用双重for循环把前一个和所有后面的元素进行比较,如果相等则删除. 但是,如果数组里面有三个以上连续相等的元素的时候,就会出现问题. var arr = [1,1,1,2,2]; for(var i=0; i<arr.length-1; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i] === arr[j]){ arr.splice(j,1); } } } document.write(&

  • JS for循环中i++ 和 ++i的区别介绍

    平时都是这样写的for循环, for(var i = 0; i < 20 ; i++){ .... } 但我看有的人这样写 for (var i = 0; i < 20 ; ++i) { .... } 这样会对for循环有什么影响? 1.在for里好像没啥区别... 但是用在赋值的时候, 就有区别了... var a = 1; var b = a++; var c = 1; var d = ++c; console.log(b,d); // 1, 2 a++ 是先应用a, 然后再自加 ++a

  • 快速掌握Node.js中setTimeout和setInterval的使用方法

    Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInterval的使用. 一.setTimeout超时计时器(和GCD中的after类似) 在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法.当调用setTime()时回调函数会在delayMillSeconds后 执行

  • jQuery的Each比JS原生for循环性能慢很多的原因

    其实查看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 = []; fo

  • js原生之焦点图转换加定时器实例

    在jQuery之焦点图转换-左右的基础上,将jQuery代码改成js原生,并添加定时器(setInterval()和clearInterval()) <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>焦点图转换--原生和定时器</title> <link rel="stylesheet&qu

  • jQuery获取文本内容和原生JS的异同之处

    jQuery获取文本内容和原生JS的异同之处

    目录 前言 一:html() 与 innerHTML 1.1 html() 对于内容的获取 1.2 html() 对于内容的设置 1.3 innerHTML 的设置与获取[原生JS 复习巩固] 1.3.1 innerHTML 对文本内容的获取 1.3.2 innerHTML 对文本内容的设置 二:text() 与 innerText 2.1 text() 对于内容的获取 2.2 text() 对于内容的设置 2.3 innerText 的设置与获取[原生JS 复习巩固] 2.3.1 innerT

  • jQuery中each和js中forEach的区别分析

    本文实例讲述了jQuery中each和js中forEach的区别.分享给大家供大家参考,具体如下: <script> $(function(){ // 3.1遍历数组 var arr = [1, 3, 5, 7, 9]; // 3.1.1通过原生方法遍历数组 // 第一个回调函数参数是遍历到的元素 // 第二个回调函数参数是当前遍历的索引 // 返回值:没有返回值 var res = arr.forEach(function(ele, idx){ console.log(idx, ele);

  • jQuery是用来干什么的 jquery其实就是一个js框架

    jQuery 简介 jQuery 库可以通过一行简单的标记被添加到网页中. 您需要具备的基础知识 在您开始学习 jQuery 之前,您应该对以下知识有基本的了解: HTML CSS JavaScript 如果您需要首先学习这些科目,请在我们的 首页 查找这些教程. 什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多"的JavaScript库. 我们小编补充: 优点: 相比于原生的js代码,用很少的代码就可以实现很强大的功

  • JS原生双栏穿梭选择框的实现示例

    JS原生双栏穿梭选择框的实现示例

    目录 何时使用 结构分支 代码 何时使用 用直观的方式在两栏中移动元素,完成选择行为. 选择一个或以上的选项后,点击对应的方向键,可以把选中的选项移动到另一栏. 其中,左边一栏为 source,右边一栏为 target,API 的设计也反映了这两个概念. 话不多说,上代码. 结构分支 代码 dataSelection.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="

  • 基于js原生和ajax的get和post方法以及jsonp的原生写法实例

    login.onclick = function(){ var xhr = new XMLHttpRequest(); xhr.open("get","http://localhost/ajax2/test2.php?username="+username.value+"&pwd="+pwd2.value,true); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.rea

  • JS原生数据双向绑定实现代码

    JS原生数据双向绑定实现代码

    代码如下: <span style="font-family:Times New Roman;font-size:14px;" deep="7"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <script> fu

  • 浅谈JS原生Ajax,GET和POST

    javascript/js的ajax的GET请求: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else

  • 实现图片首尾平滑轮播(JS原生方法—节流)

    实现图片首尾平滑轮播(JS原生方法—节流)

    首先给出HTML代码,要注意轮播图片表(#list)末尾加上第一个图片1.jpg,在首部加上最后一个图片5.jpg. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首尾轮播</title> <link rel="stylesheet" href="首尾轮播.css&q

随机推荐