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()方法拼接字符串。
上面使用+号拼接的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
{}