JQuery经常使用功能的性能优化

使用最佳选择器

     一般比较经常使用的选择器有如下几个：

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

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

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

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

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

    结论

        1.原生方法是最快的方法，若是可能，尽可能选择用原生

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

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

        4.属性和伪类选择器很是慢，如非必要，尽可能少使用伪类选择器和属性选择器

    最佳实践

        1.为模块中操做最频繁的元素和根元素设置id，而后缓存；

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

        3.尽可能避免复杂的选择器

    

避免执行全局查找

 $("div.bizHelp");

        =>

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

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

避免对空结果进行操做

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

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

blank.slideUp();

        =>

blank.length && blank.slideUp();

避免使用匿名函数

大量的使用匿名函数会对程序的调试、维护以及经过第三方软件来作性能测试增长难度，所以应该尽可能避免大量的使用匿名函数

obj.click(function(){  
  //do something...  
})

=>>

var clickHandler=function(){  
  //do something...  
}  
obj.click(clickHandler)

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

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

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

        A:

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

        B:

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

        C:

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

        结论

            整体上来讲A>C>B

        最佳实践

            追求极致性能，用原生方法；

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

优先使用原生属性

    不少经常使用的属性，好比id、name等都被浏览器原生实现，在JQuery中咱们有时会用$(this).attr("id")的方式来获取id，这种方法的效率相比原生属性的获取效率而言，很是慢。

$.each(list,function(){   
  //A
  var id=$(this).attr("id");
  
  //B
  var id=this.id;  
  })

    结论

        使用原生的API，能够极大的提升性能

    最佳实践

        对于id等经常使用的属性，用原生的属性，不要经过attr去获取；

使用事件委托

     给一个列表中全部元素添加点击事件，传统的作法是获得这个列表的JQuery对象:$("li"),而后添加click事件：

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

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

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

    A:

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

    B:

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

        结论

        委托的性能优点是很是绝对的；

        最佳实践

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

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

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

        后者比前者快近10倍

原文连接：http://andashu.blog.51cto.com/8673810/1375329