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