《鋒利的jquery》之——jquery性能優化

　　轉自《鋒利的jquery》第十一章，電子書及源碼  http://www.cnblogs.com/akou/p/4461557.html.

 一，性能優化

　1，使用追新版本的jquery類庫

　    jquery每個新的版本都會較上一個版本進行bug修復和優化，同時也包含一些創新，因此建議使用最新版本的jquery來提升性能。不過須要注意的是，更換版本以後，不要忘記測試代碼，有的時候不是徹底向後兼容。（write less do more！）

   2，使用合適的選擇器

　　使用id來定位DOM元素是最佳提升性能的方式，由於jquery底層將直接調用本地方法document.getElementById()。若是不能直接找到須要的元素，能夠考慮使用find()方法，爲了提升性能建議從最近的id開始往下搜索，性能第二優的是標籤選擇器，標籤選擇器直接調用本地方法document.getElementByClassName()，日後依次是class選擇器，和屬性選擇器。

   3，緩存對象

　　在書寫jquery代碼中，常常用以下書寫方式：

$("#traffic_light input.on").bind("click",function(){...});
$("#traffic_light input.on").css("border","1px solod #fff");
$("#traffic_light input.on").css("background","#fff");
$("#traffic_light input.on").fadeIn("slow");

　　這樣的結果致使jquery會在建立每個選擇器的過程當中。查找dom，建立多個jquery對象，比較好的書寫方式以下，儘可能不要讓相同的選擇器在代碼中屢次出現。

var $active_light = $("#traffic_light input.on");//緩存變量
$("#traffic_light input.on").bind("click",function(){...});
$("#traffic_light input.on").css("border","1px solod #fff");
$("#traffic_light input.on").css("background","#fff");
$("#traffic_light input.on").fadeIn("slow");

  4，循環時的DOM操做

　　使用jquery能夠方便添加，刪除或修改DOM節點，可是在一些循環中須要注意：

var top_100_list = [...]   //假設這裏是100個獨一無二的字符串
$myist = $("#mylist");  //jquery選擇到<ul>元素
 for（var i=0,l = top_100_list.length;i<l;i++）{
     $mylist>append("<li>" + top_100_list[i]+"</li>");
   }

　　以上代碼中，咱們將每個添加的標籤元素都做爲一個節點添加容器ID中，實際上jquery操做消耗的性能也不低，因此更好的方式是儘量減小DOM操做，這裏應該將整個元素字符串在插入DOM前所有建立好，修改代碼以下：

var top_100_list = [...],$mylist = $("#mylist"),
top_100_li = "";   // 這個變量將用來存儲咱們的列表元素
for(var i = 0,l = top_100_list.length;i<l;i++){
     top_100_li+="<li>" + top_100_list[i] + "</li>";
}
$mylist.html(top_100_li);

  5，數組方式使用jquery對象

　　使用jquery選擇器獲取的結果是一個jquery對象。然而，jquery類庫會讓你感受你正在使用一個定義了索引和長度的數組。在性能方面，建議使用簡單的for或者while循環來處理，而不是$.each(),這樣使代碼更快。　　

 $each(array.function(i)){
     array[i] = i;
 }
//使用for代替each()方法，代碼以下：
var array = new  Array();
for(var i=0;i<array.length;i++){
     array[i] = i;
}

  6，事件代理

     每個JavaScript事件（click，mouseover）都會冒泡到父級節點。當咱們給多個元素調用同個函數時這點會頗有用。好比，咱們要爲一個表格綁定這樣的行爲：點擊td後，把背景設置爲紅色，代碼以下：

 $("#myTable td").click(function(){
          $(this).css('background','red');
});

　　假設有100個td元素，在使用上方式的時候，你綁定了100個事件，這將帶來很負面的影像。有什麼更好的方式呢？ 代替這種多元素事件監聽的方法就是，你只需向它們的父節點綁定一次事件，經過event.target 獲取到點擊的當前元素，代碼以下

$('#myTable').click(function(e){
          var $clicked = $(e.target);   //e.target 捕捉到出發的目標元素
          $clicked.css('background','red');
})

　　     在改進的方式中，只爲一個元素綁定了一個事件。很顯然這種方式性能方面要優於以前那種，也能夠用on(),幫助你將整個事件監聽封裝到一個便利的方法中。

 $('#myTable').on()('click','td'.function(){
          $(this).css('background','red');
});

  7，將代碼轉化成jquery插件

　　若是每次都須要花時間去開發相似的jquery代碼，那麼你能夠考慮將代碼變成插件。

  8，使用join來拼接字符串

      使用join來拼接比使用「+」來拼接性能要好。

  9，合理利用HTML5的Date屬性

   　HTML5的data屬性能夠幫助咱們插入數據，特別是後端的數據交換。jquery的data()方法，有效的利用HTML5的屬性，來自動獲得數據。

    　　  <div id = "dl" data-role = "page" data-last-value = "43" data-options = '{"name":"john"}'></div>

　　爲了讀取數據，須要使用以下代碼：

　　　　$("dl").data("role");  // "page"

　　　　$("dl").data("lastValue");  // 43

　　　　$("dl").data("options").name;   // "John";

  10，儘可能使用原生的javascript方法

 

  11，壓縮javascript