Jquery执行效率提高的方法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.选择器性能排行：$("#ID") > $("Tag") > $(".Class") > $("[attribute=value]")

2.链式调用：

$("#gbdiv").hide();
$("#gbdiv").css("color", "#202020");
$("#gbdiv").show();

上述代码使用下面的写法，可提高执行效率

$("#gbdiv").hide();.css("color", "#202020").show();

3.缓存caching

$("#gbdiv").hide();
$("#gbdiv").css("color", "#202020");
$("#gbdiv").show();

上述代码使用下面的写法，可提高执行效率

var gbin1=$("#gbdiv");
gbin1.hide();
gbin1.css("color", "#202020");
gbin1.show();

4.尽量减少在循环语句中的DOM操作

var data = ["Saab","Volvo","BMW"];
$.each(data, function(i, item){
var newitem='<div>' + item + '</div>';
$("#gbcontainer").append(newitem);
});

上述代码使用下面的写法，可提高执行效率

var data = ["Saab","Volvo","BMW"];
var tmp = "";
$.each(data, function(i, item){
tmp +='<div>' + item + '</div>';
});
$("#gbcontainer").append(tmp);

5.事件代理

在jQuery1.7中提供了一个新的方式on()，这个方法帮助你将整个事件监听封转到一个便利方法中，这里有个例子：

$('#gbin1').find('div').click(function() {
$(this).toggleClass('gbin1');
});

这个方法很简单，找到指定ID的div，并且添加或者删除class=gbin1 。

如果你在#gbin1中有1000个div的话，你将绑定1000个事件。这将带来很负面的性能影响，使用.on方法，你可以重构如下，同样帮助你有效的优化性能：

$('#gbin1').on('click','div',function() {
$(this).toggleClass('gbin1');
});