jQuery性能优化

大家都知道jQuery非常流行，是前端开发中重要的类库之一，也成为构建丰富web前端的利器。但是作为一个javascript类库，很多人并不是很清楚如何正确的使用jQuery来达到最佳的性能，特别是复杂的动画和web应用，它可能成为性能瓶顶。

我将在本篇文章中介绍我们在使用jQuery时，应该注意的一些性能问题，希望对大家开发高性能的web应用有所帮助。

使用最新版本的jQuery类库

JQuery每一个新的版本都会对上一个版本进行BUG修复和一些优化，同时也会包含一些创新，所以建议使用最新版本的jQuery的提高性能。不过你需要注意的是，在更换版本之后，不要忘记测试你的代码，毕竟有时候不是完全向后兼容的。

使用合适的选择器

JQuery提供非常丰富的选择器DOM元素，选择器是开发人员最常使用的功能，但是很少开发人员会考虑使用不同选择器来处理性能问题。下面介绍几种常用选择器，以及他们之间的性能差异。

（1）$(“#id”)

使用id来定位DOM元素是最佳的提高性能的方式，因为jQuery底层将直接调用document.getElementById()。熟悉JavaScript的人都知道这个方法将直接通过元素id来返回对应的元素。当然，如果这个方式不能直接找到你需要的元素，那么你可以考虑调用find()方法。代码如下：

$(“#content”).find(“div”)

使用以上方法可以有效的缩小你定位的DOM元素。为了提高性能，建议从最近的ID元素开始往下搜索。

（2）$(“p”) , $(“div”) , $(“input”)

标签选择器的性能也是不错的，它是性能优化的第二种选择，因为jQuery将直接调用本地方法document.getElementsByTagName()来找到DOM元素。

（3）$(“.class”)

这种方法有可以有选择性的使用。对于IE9以上的浏览器，它支持本地方法document.getElementByClassName(),而对于IE8或者更早的版本，只能使用DOM搜索方式来实现，这会对性能产生较大影响。

（4）$(“[attribute=value]”)

对于属性选择器，本地JavaScript方法中并没有直接的实现，大多都是使用DOM搜索方式来达到效果，很多新版本浏览器支持querySelectorAll()方法，但是不通浏览器间的性能还是有区别。总体来说，使用这种方式来定位DOM元素，性能并不是非常理想。所以为了获得更好的性能优化效果 ，建议在开发中尽量避免这种对性能有害的方式。

（5）$(“:hidden”)

和属性选择器类似，伪选择器也没有直接在本地JavaScript方法中实现，jQuery需要搜索每一个元素来定位这个选择器，这将产生比较大的性能问题看，所以建议大家尽量不要使用。如果坚持使用，先用ID选择器定位父元素，然后再使用，这样对性能优化会有帮助。代码如下：

$(“content”).find(“:hidden”);

注意：尽量使用ID选择器，尽量给选择器指定上下文。

三、缓存对象

在书写jQuery代码中，开发人员最常用如下书写方式：

$(“#ydm input.on”).bind(“click”,function(){ . . .});

$(“#ydm input.on”).css(“border”,”1px dashed yellow”);

$(“#ydm input.on”).css(“background-color”,”orange”);

$(“#ydm input.on”).fadeIn(“slow”);

这样写导致的结果是：jQuery会在创建每一个选择器的过程中，查找DOM，创建多个jQuery对象。比较好的书写方式如下：

var $a=$(“#ydm input.on”); //缓存变量

$a.bind(“click”,function(){ . . .});

$a.css(“border”,”1px dashed yellow”);

$a.css(“background-color”,”orange”);

$a.fadeIn(“slow”);

在这个例子中，如果使用链式操作将更加简洁，这里只是为了说明缓存变量的重要性，这和Java开发中不要随意创建对象一样，可以有效的提高代码运行性能。

链式操作改写如下：

var