8个能够有效帮助你提高jQuery代码性能的技巧

jQuery越来越流行了，大家可能也会发现，在浏览网站过程中，越来越多的网站开始使用jQuery来构建以前需要使用flash来实现的超酷动态效果，事实上jQuery已经成为前端开发中重要的类库之一，发挥着构建丰富web前端的利器。但是作为一个JS类库，很多人并不是非常清楚如何正确使用jQuery来达到最佳的性能（Peformacne），如果你觉得代码书写对于性能的影响不会那么巨大，那么我只能告诉你，当你使用jQuery开发一个复杂的动画和web应用的话，它有可能成为你性能上的终极噩梦。

在这篇文章中，我们将介绍代码书写中，大家应该需要注意的几个性能问题，希望对于大家在书写高性能的web应用中有帮助，大家在书写jQuery的过程中，尽量注意和避免这些性能的问题，才能写出高质量高性能的web应用，希望大家喜欢这篇文章。谢谢！

选择器Selector的使用

jQuery中的选择器selecor是大家经常使用的强大功能，事实上jQuery提供给我们非常丰富的手段来使用选择器定位DOM元素。但是很少有开发人员会考虑使用不同的选择器来处理性能问题。这里我们将介绍几种常用的选择器，及其它们之间的性能差异。

$("#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") 

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

当然，可能有朋友觉得的不是非常可信，那么这里我们将使用一个在线工具jsPerf来帮助大家更直观的查看性能区别，如下：

测试用例： http://jsperf.com/id-vs-class-vs-tag-selectors/2

链式调用是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开发中不要随意的创建对象一样，可以帮助你有效的提高代码运行性能。
测试用例：http://jsperf.com/ns-jq-cached/3

事件代理

在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');
});

测试用例：http://jsperf.com/ns-jq-cached/3

循环语句中的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);  

 
转载：http://www.gbin1.com/technology/jquery/20120222jqueryxingneng/index.html