JQuery性能優化

一：不要每次都在循環中通路數組的 <code>length</code> 屬性，應在循環開始之前就将其緩存：

二:在循環外執行 append 操作

直接操作 DOM 是非常耗費性能的，尤其不要在循環中直接操作 DOM：

避免做重複的事情。如果你一直在做重複的事情，那麼就可能出問題了：

 四：警惕匿名函數

匿名函數滿天飛是很痛苦的事情，它們難以調試、維護、測試或者複用，應盡可能的對函數命名并将其封裝在對象中，實施有效的管理：

 五：選擇器的優化

随着越來越多的浏覽器支援 <code>document.querySelectorAll()</code>，選擇器的重擔已經慢慢轉移給浏覽器了，但還是有一些技巧需要注意：

優先并盡可能地使用 ID 選擇器：

六：使用 <code>$.fn.find</code> 的方式更快，因為在 <code>$.fn.find</code> 之前的選擇器并沒有使用 jQuery 自帶的 Sizzle 選擇器引擎，而是使用了浏覽器 <code>document.getElementById()</code> 方法，浏覽器原生的方法自然更快。

使用組合選擇器時，盡可能使右端更明确，而左端不盡量不明确：

七：盡量在選擇器右端使用 <code>tag.class</code>，而左端盡可能隻使用 <code>tag</code> 或者 <code>.class</code>。

避免過度具體：

八：簡潔的 DOM 結構也有助于提升選擇器的性能，因為選擇器可能少走幾層彎路去尋找那些元素。

盡量避免使用通配符，任何顯式或隐式的使用通配符，都會降低選擇器的性能：

 九：使用事件代理

事件代理允許将一個事件綁定到某個容器上（例如一個無序清單 <code>ul</code>），而不是綁定到容器内所有元素上（例如清單元素 <code>li</code>）。雖說 <code>$.fn.live</code> 和 <code>$.fn.delegate</code> 都是将事件綁定到容器上，但是應盡可能是用 <code>$.fn.delegate</code>，畢竟其明确的上下文（相較于 <code>$.fn.live</code> 的上下文是<code>document</code>）要小得多，避免了很多不必要的過濾。

除了性能方面的提升，如果給綁定了事件的容器内添加新元素，那麼這些新元素就無須再次綁定事件了，這也是個優點。

DOM 操作是比較慢的，是以應盡量避免直接操作 DOM。jQuery 在其 1.4 版中引入了 <code>$.fn.detach</code>方法，可以将元素從 DOM 中解除安裝出來然後進行操作，操作好了之後再添加到 DOM 中：

當使用 <code>$.fn.css</code> 為超過 20 個元素修改樣式時，應考慮直接在頁面中添加 <code>style</code> 标簽，據說性能可提升 60%。

将 <code>$.data</code> 應用于 DOM 元素上，比直接在選擇器上調用 <code>$.fn.data</code> 要快 10 倍。當然，前提是要先明白 DOM 元素和 jQuery 結果集之間的差別。

jQuery 不會主動告訴你，你正在一個空白的結果集上運作代碼 – 而且執行過程中并未出錯。是以有時候再執行代碼之前，需要先判斷一下結果集是否為空：　　

這種方法特别适用于 jQuery UI 方面，因為即使結果集中不包含任何元素，其開銷也會很大。

可以在一條語句中定義多個變量：

 　　在自執行函數中，變量甚至可以不用定義：

 條件判斷：