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

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：702 次日期：2016-07-26 14:34:13

温馨提示：小编为您整理了“jQuery的Each比JS原生for循环性能慢很多的原因”,方便广大网友查阅！

这篇文章主要介绍了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循环性能对比

<title>for与each性能比较</title>

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>

</select><input type="button" value="开始比较" onclick="getSelectLength();" /></div>

<div>

</form>

</body>

</html>

输入出入：

for循环执行时间：1

each循环执行时间：3

两次结果直接说明了问题。

以上所述是小编给大家介绍的jQuery的Each比JS原生for循环性能慢很多的原因，希望对大家有所帮助

上一篇：JQuery组件基于Bootstrap的DropDownList(完整版)

下一篇：Node.js实现文件上传

手机网站地址：jQuery的Each比JS原生for循环性能慢很多的原因

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！