jquery的each比原生的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中比较消耗性能的方法,在性能要求严格时,建议少用。
$.each()
中的参数可以直接在bind
等方法中使用。for的话。需要用参数传递过去。
如果for循环中药使用
item的id就需要如下写法,否则可能会传递不过去。
tempALL.find("#depTag").bind("click",{"id":item.id},function(event){
toMore(event.data.id,0);
}).
如果是each
就可以直接
tempALL.find("#depTag").bind("click",function(event){
toMore(item.id,0);
}).
each是jquery封装的迭代器, 使用场景和范围更广, 处理起来会更简便,语法也相对优雅。
for循环由于是系统源生语法,性能上肯定比each要强, 但只能处理特定的数据类型,并且根据业务需求使用起来可能会复杂不少。
具体场景
each跳不出循环,只能等全部循环完成
for可以自定义跳出循环但是写起来代码量多
each是 jq 的,for循环是 js 的,不过for也可以用到JQ上!
具体看情况,如果each不能用就用for,
类似each循环的还有
parent() 遍历祖先
children();遍历后代
siblings()遍历同辈