jquery最佳實踐筆記

使用最新版本

由於新版本會改進性能，還有不少新功能

用對選擇器

• 最快的選擇器：id選擇器和元素標籤選擇器
  緣由：遇到這些選擇器的時候，jQuery內部會自動調用瀏覽器的原生方法（好比getElementById()），因此它們的執行速度快

• 較慢的選擇器：class選擇器
  $('.className')的性能，取決於不一樣的瀏覽器。

  Firefox、Safari、Chrome、Opera瀏覽器，都有原生方法getElementByClassName()，因此速度並不慢。可是，IE5-IE8都沒有部署這個方法，因此這個選擇器在IE中會至關慢。

• 最慢的選擇器：僞類選擇器和屬性選擇器
  緣由：瀏覽器沒有針對的原生方法

• 優化點
  給選擇器指定上下文

  $('.class');//慢的，須要遍歷整個dom去查找.class
  $('.class', '#class-container');//快的，由於它僅在class-container元素下查找

最快的查找子元素方法

$parent.find('.child')
這條是最快的語句。.find()方法會調用瀏覽器的原生方法（getElementById，getElementByName，getElementByTagName等等），因此速度較快。

• 對比：
  $('#parent > .child')

  jQuery內部使用Sizzle引擎，處理各類選擇器。Sizzle引擎的選擇順序是從右到左，因此這條語句是先選.child，而後再一個個過濾出父元素#parent，這致使它比最快的形式大約慢70%。

  $('#parent .child')

  這條語句與上一條是一樣的狀況。可是，上一條只選擇直接的子元素，這一條能夠於選擇多級子元素，因此它的速度更慢，大概比最快的形式慢了77%。

有原生方法可使用的場合，儘可能避免使用jQuery

作好緩存

使用鏈式寫法

事件的委託處理（Event Delegation）

少改動DOM結構

• 若是要插入多個元素，就先把它們合併，而後再一次性插入
  // 更好的,array.join('')

• 若是你要對一個DOM元素進行大量處理，應該先用.detach()方法，把這個元素從DOM中取出來，處理完畢之後，再從新插回文檔

• 若是你要在DOM元素上儲存數據，不要寫成下面這樣：

  var elem = $('#elem');
  elem.data(key,value);

  而要寫成

  var elem = $('#elem');
  $.data(elem[0],key,value);

  根據測試，後一種寫法要比前一種寫法，快了將近10倍。由於elem.data()方法是定義在jQuery函數的prototype對象上面的，而$.data()方法是定義jQuery函數上面的，調用的時候不從複雜的jQuery對象上調用，因此速度快得多。（此處能夠參閱下面第10點。）

• 插入html代碼的時候，使用瀏覽器原生的innerHTML

正確處理循環

javascript原生循環方法for和while，要比jQuery的.each()方法快，應該優先使用原生方法。

AJAX

1. 避免使用.getJson() 或 .get()，而是直接使用$.ajax()方法

2. 不要使用http或https請求，寧願選擇無模式的URLs，從url中去掉http或https

3. 不要在url中加參數，用data對象傳遞它們。

參考資料

阮一峯老師的博客