jQuery 性能优化指南（3）

8，尽量使用id代替class。
前面性能优化已经说过，id选择器的速度是最快的。所以在html代码中，能使用id的尽量使用id来代替class。
看下面的一个例子：
// 创建一个list
var $mylist = $('#mylist');
var mylistitems = '';
for (i = 0; i      mylistitems += 'this is a list item'; //这里使用的是class
}
mylistitems += '';
$mylist.html(mylistitems);
// 选择每一个 li
for (i = 0; i     var selecteditem = $('.listitem' + i);
}
在代码最后，选择每个li的过程中，总共用了5066毫秒，超过5秒了。
接着我们做一个对比，用id代替class：
// 创建一个list
var $mylist = $('#mylist');
var mylistitems = '';
for (i = 0; i     mylistitems += 'this is a list item'; //这里使用的是id
}
mylistitems += '';
$mylist.html(mylistitems);
// 选择每一个 li
for (i = 0; i      var selecteditem = $('#listitem' + i);
}
在上段代码中，选择每个li总共只用了61毫秒，相比class的方式，将近快了100倍。
9，给选择器一个上下文
jquery选择器中有一个这样的选择器，它能指定上下文。
jquery( expression, context );
通过它，能缩小选择器在dom中搜索的范围，达到节省时间，提高效率。
普通方式：
$('.mydiv')
改进方式：
$('.mydiv' , $(#listitem) )
10，慎用 .live()方法（应该说尽量不要使用）
这是jquery1.3.1版本之后增加的方法，这个方法的功能就是为新增的dom元素动态绑定事件。
但对于效率来说，这个方法比较占用资源。所以请尽量不要使用它。
例如有这么一段代码:
$(function(){
$(p).click(function(){
     alert( $(this).text() );
});
$(button).click(function(){
    $(this is second p
).appendto(body);
});
})
this is first p
add
运行后，你会发现新增的 p元素，并没用被绑定click事件。
你可以改成.live(click)方式解决此问题，代码如下：
$(function(){
$(p).live(click,function(){ //改成live方式
     alert( $(this).text() );
});
$(button).click(function(){ $(this is second p
).appendto(body); });})
但我并不建议大家这么做，我想用另一种方式去解决这个问题，代码如下：
$(function(){
$(p).click(function(){
    alert( $(this).text() );
});
$(button).click(function(){
    $(this is second p
).click(function(){ //为新增的元素重新绑定一次
            alert( $(this).text() );
    }).appendto(body);
});
})
虽然我把绑定事件重新写了一次，代码多了点，但这种方式的效率明显高于live()方式，
特别是在频繁的dom操作中，这点非常明显。
11，子选择器和后代选择器
后代选择器经常用到，比如：$(#list p);
后代选择器获取的是元素内部所有元素。
而有时候实际只要获取子元素，那么就不应该使用后代选择器。
应该使用子选择器，代码如下：
$(#list > p);
12，使用data()方法存储临时变量
下面是一段非常简单的代码，
$(function(){
    var flag = false;
    $(button).click(function(){
        if(flag){
            $(p).text(true);
            flag=false;
        }else{
            $(p).text(false);
            flag=true;
        }
    });
})
改用data()方式后，代码如下：
$(function(){
    $(button).click(function(){
        if( $(p).data(flag) ){
            $(p).text(true);
            $(p).data(flag,false);
        }else{
             $(p).text(false);
             $(p).data(flag,true);
        }
    });
})
jquery性能优化指南(3)到此结束。
相信你也有你的idea，请共享出来吧。 email : cssrain@gmail.com

jQuery 性能优化指南（3）_jquery

推荐信息