掌握这些jQuery性能优化技巧让你工资轻松翻倍！

jQuery就是用javascript更加方便的查询和控制页面控件，它是一个伟大的Javascript框架，它是轻量级的js库(压缩后只有不到100k)
，兼容CSS3，还兼容各种浏览器，jQuery使用户能更方便地处理HTML、documents、events、实现动画效果，并且方便地为网站提供AJAX交互。那么我们使用jQuery时应该从哪几个方面进行性能的优化？

一、尽量使用最新版本的jQuery 类库。

jQuery 每一个新的版本都会较上一版本进行bug修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的jQuery来提高性能。不过更换新版本之后,不要忘记测试代码的兼容性。

二、使用合适的选择器。

1、使用$(“#id”)

使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery 底层将直接调用JavaScript的原生方法document.getElementById()。此外选择元素时,应该尽量缩小DOM的查找范围。例如在某个id下查找div.$("#id").find("div");这样也能提高查找效率。

2、使用标签选择器 $("div") $("input")

使用标签选择器将会直接调用javascript的document.getElementsByTagName()方法来定位DOM元素。

3、使用类选择器 $(".class")

使用类选择器,如果浏览器支持javascript的document.getElementsByClassName()方法,则直接使用该方法,否则就逐个遍历DOM元素。

4、使用属性选择器 $("[attribute=value]")

较新的浏览器可能支持document.querySelectorAll()方法,但是有的浏览器可能不支持,这在于他们的内核不一样。使用这种方式来查找DOM元素,性能并不理想,在开发中应该尽量避免使用。

5、使用伪选择器 $(":hidden")

和上面的属性选择器是同一类,javascript并没有对这类的实现,只有通过逐个遍历DOM元素来查找满足要求的元素,这个尽量不要使用。如果必须查找,则尽量缩小范围,从其父元素来进行搜索。例如:$("#id").find(":hidden");$("div.div").filter(":hidden")等。

三、缓存对象。

如果在jQuery开发中经常使用一个对象,建议进行对其缓存,否则你每次使用$()这种方式都会创建一个jQuery对象。

例如有的人喜欢这样写:

$("#btn").bind("click",function(){});

$("#btn").css("border","1px");

$("#btn").css("backgroud-color","red");

$("#btn")....

这样最终会使jQuery创建很多的$(“#btn”)对象,而且在创建之前都必须进行DOM 查找一次，所以建议使用缓存对象或者链式的方式。

四、使用js数组join(
4000
)方法拼接字符串。

上面使用+号拼接的li字符串,但是现在可以使用数组来转换字符串,性能比+号拼接微好些了,尤其是处理长字符串。

$ulList=$("#ulList");//ul列表集合

var liArr=[];

for(var i=0;i<10;i++)

{

liArr[i]="<li>"+i+"</li>";

}

$ulList.append(liArr.join(''));

五、数组方式使用jQuery对象。

使用jQuery选择器获取的结果是一个jQuery对象。jQuery类库会让你感觉正在使用一个定义了索引和长度数组。在性能方面,建议使用for或者while循环处理,而不是使用$.each()。这样使你的代码更快。

$.each(array,function(i){

});

可以使用for代替each方法,代码如下:

for(var i=0,len=array.length;i<len;i++)

{

}

另外,检查长度也是检查一个jQuery对象是否存在的方式。

var $btn=$("#btn");

if($btn)//总是true

{};

if($btn.length)//元素存在才返回true

{}