JQuery常用功能的性能优化

时间:2022-12-16 18:59:40


使用最佳选择器

     通常比较常用的选择器有以下几个:

        1.ID选择器 $("#id")

        2.标签选择器 $("td")

        3.类选择器 $(".target")

        4.属性选择器 $("td[target='target']")

        5.伪类选择器 $("td:hidden")

    结论

        1.原生方法是最快的方法,如果可能,尽量选择用原生

        2.性能顺序:ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器

        3.ID(getElementById)、标签选择器(getElementsByTagName)都有原生的方法对应,所以很快;类选择器在除了IE5-IE8之外的主流浏览器几乎都有原生方法(getElementsByClassName),为了兼顾IE6、7、8的性能,避免使用全局的类选择器;

        4.属性和伪类选择器非常慢,如非必要,尽量少使用伪类选择器和属性选择器

    最佳实践

        1.为模块中操作最频繁的元素和根元素设置id,然后缓存;

        2.对没有id的元素检索,尽量采用路径最短的祖先元素id作为默认的搜索范围,并采用纯类选择器或者标签选择器;

        3.尽量避免复杂的选择器

    

 

避免执行全局查找

1  $("div.bizHelp");

 

        =>

1 $("#container").find(".bizHelp");

 

        保证查询的路径最短,性能最优,参照第一条;

 

 

避免对空结果进行操作

对于数量为0的选择结果,JQuery会执行默认动作,并且不会报错,这会影响程序的性能。

1 var blank=$(".blank");//length=0

 

1 blank.slideUp();

 

        =>

1 blank.length && blank.slideUp();

 

 

 

 

避免使用匿名函数

大量的使用匿名函数会对程序的调试、维护以及通过第三方软件来做性能测试增加难度,因此应该尽量避免大量的使用匿名函数

1 obj.click(function(){  
2   //do something...  
3 })

 

=>>

1 var clickHandler=function(){  
2   //do something...  
3 }  
4 obj.click(clickHandler)

 

 

 

 

大循环采用更高效的遍历方式

        JQuery提供了$.fn.each()和$.each()两个方法来实现对集合的遍历,除此之外,还可以采用JS原生的for循环、while等来实现迭代:

1  var list=ul.find("li"),e;

 

        A:

1  var i=list.length;  
2         while(i--){  
3             e=$(list[i])  
4         }

 

        B:

1   list.each(function(){  
2           e=$(this);  
3         });

 

        C:

1  $.each(list,function(){  
2           e=$(this);  
3         });

 

        结论

            总体上来说A>C>B

        最佳实践

            追求极致性能,用原生方法;

            循环数量少的话,建议使用$.each(),比较稳定;

 

 

 

优先使用原生属性

    很多常用的属性,比如id、name等都被浏览器原生实现,在JQuery中我们有时会用$(this).attr("id")的方式来获取id,这种方法的效率相比原生属性的获取效率而言,非常慢。

1 $.each(list,function(){   
2   //A
3   var id=$(this).attr("id");
4    
5   //B
6   var id=this.id;  
7   })

 

    结论

        使用原生的API,可以极大的提高性能

    最佳实践

        对于id等常用的属性,用原生的属性,不要通过attr去获取;

 

 

 

使用事件委托

     给一个列表中所有元素添加点击事件,传统的做法是得到这个列表的JQuery对象:$("li"),然后添加click事件:

1 $("li").click(function(){})

 

    这种方法的在列表数量比较大的时候会有严重的性能问题,应该值得关注。

    可以使用JQuery的事件委托机制,能很大程度的降低添加事件监听的消耗和内存的消耗。

    A:

1 var list=$("li");//length>1    list.click(function(){  })

 

    B:

1   $("ul").delegate("li","click",function(){})

 

        结论

        委托的性能优势是非常绝对的;

        最佳实践

        对于需要同时给两个以上的同类型元素添加事件时,用方案B来代替A

 

 

 

使用$.data 而不是$.fn.data

1 $(elem).data(key,value);  $.data(elem,key,value);

 

        后者比前者快近10倍