jQuery代码性能小细节

选择器Selector的使用

$("#id")
使用id来定位DOM元素无疑是最佳提高性能方式，因为jQuery底层将直接调用本地方法document.getElementbyId()，如果熟悉javascript的朋友应该了解这个方法将直接通过元素id来返回对应的元素。当然，如果这个方式不能直接找到你需要的元素，那么你可以考虑调用.find()方法。如下：
$("#gbid").find("div")
使用以上方法可以有效的缩小你定位的DOM元素。

$("p")，$("div")，$("input")
使用标签名是第二优化选择，因为jQuery将直接调用本地方法document.getElementsByTagname()来定位DOM元素。

$(".class")
使用.class方法对于我们来说稍微复杂些，对于比较新的浏览器例如，IE9，它支持本地方法document.getElementsByClassName()，而对于老的浏览器，例如，IE8或者更早版本来说，不得不使用DOM搜索方式来实现，自然会对于性能产生比较大的影响。所以大家得选择使用。

$("[attribute=value]")
对于利用属性来定位DOM元素，本地javascript方法中并没有直接的实现。所以大都都是使用DOM搜索方式来达到效果，很多现代浏览器支持querySelectorAll()方法，但是不同浏览器的性能还是有区别。总体来说，使用这种方式来定位DOM元素，并不是非常理想。所以为了获得更好的优化效果，你需要尽量避免这个对性能有害的使用方式。

$(":hidden")
和上面使用属性来定位DOM的方式类似，这种伪选择器也同样没有本地js方法来直接实现。而且jQuery需要搜索每一个元素来定位这个选择器，将会对你的应用带来比较大的性能问题。所以大家尽量不要使用，当然，如果你非要使用的话，请先是用find方法定位父元素，然后，再使用这个选择器，这样会帮助你很好的优化性能，如下：
$("#gbdiv").find(":hidden")

以上是一个基本使用选择器的规则，自上而下性能依次下降，如果大家在开发中使用选择器，请遵循以上这个简单的优化性能规则。

链式调用（chaining）
链式调用是jQuery的一个非常不错的特性，它能够帮助你写出非常简洁的代码，主要的思想在于，处理同一个对象的时候，jQuery会返回一个jQuery对象，好处是你可以继续的处理下一个方法。非常典型的应用如下：
$("#gbdiv").hide();
$("#gbdiv").css("color", "#202020");
$("#gbdiv").show();
如果使用链式调用，优化性能如下：
$("#gbdiv").hide().css("color", "#202020").show();
好处在于你不用多次调用$("#gbdiv")，当然，如果你非要这样写，建议你考虑使用缓存方式。但是使用链式调用会使得jQuery代码更加简单并且性能更好。

缓存caching
在书写jQuery代码中，开发人员经常喜欢如下书写：
$("#gbdiv").hide();
$("#gbdiv").css("color", "#202020");
$("#gbdiv").show();
当然，无可厚非，编程中的跳跃思维导致你有可能这样书写代码，但是这样的结果是导致jQuery会在创建每一个选择器的过程中，查找DOM，比较好的优化性能方式是如下书写：

var gbin1=$("#gbdiv");
gbin1.hide();
gbin1.css("color", "#202020");
gbin1.show();
当然使用链式更加简洁，但是同样使用caching的重要，这和Java开发中不要随意的创建对象一样，可以帮助你有效的提高代码运行性能。

事件代理
在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');
});

循环语句中的DOM操作
使用jQuery可以很方便的添加，删除或者修改DOM节点，但是在一些循环，例如，for()， while()或者$.each()中处理节点，大家得注意一下，这里有个例子：
var data = ["Saab","Volvo","BMW"];
$.each(data, function(i, item){
var newitem='<div>' + item + '</div>';
$("#gbcontainer").append(newitem);
});

以上代码中，我们将每一个新添加的tag都作为一个节点添加到容器ID中，实际上jQuery操作节点的成本也不低，更好的方式是尽可能的减少DOM操作，修改代码优化性能如下：
var data = ["Saab","Volvo","BMW"];
tmp = '';
$.each(data, function(i, item){
tmp +='<div>' + item + '</div>';
});
$("#gbcontainer").append(tmp);