JQuery效能優化的幾點建議_jquery

針對jquery效能優化這個主題，想必大家都有所了解。以下是我蒐集點一點資料關於jquery效能優化，大家可以參考參考。

一、選擇器效能最佳化建議

 1. 總是從#id選擇器來繼承：這是jQuery選擇器的一個黃金法則。 jQuery選擇一個元素最快的方法就是用ID來選擇了；

 2. 在class前面使用tag：jQuery中第二快的選擇器就是tag選擇器(如$(‘head'))，因為它和直接來自於原生的Javascript方法getElementByTagName()。所以最好總是用tag來修飾class(並且不要忘了就近的ID)；

 3. 使用子查詢:將父物件快取起來以備將來的使用；

 4. 採用find()，不使用上下文來找出；

 5. 利用強大的鍊式操作:採用jQuery的鍊式操作比快取選擇器更有效；

二、最佳化DOM操作建議

 1.快取jQuery物件: 將你常用的元素快取起來;

 2. 當要進行DOM插入時，將所有元素封裝成一個元素：
　　這裡的基本思想是在記憶體中建立你確實想要的東西，然後更新DOM。這並不是一個jQuery最佳實踐，但必須進行有效的JavaScript操作 。直接的DOM操作速度很慢
　　直接的DOM操作很慢。盡可能少的去更改HTML結構。

 3.使用直接函數，而不要使用與與之等同的函數:為了獲得更好的性能，你應該使用直接函數如$.ajax()，而不要使用$.get(),$.getJSON (),$.post()，因為後面的幾個將會呼叫$.ajax()。

 4. 快取jQuery結果，以備後來使用：
　　你經常會獲得一個javasript應用對象－你可以用App.來保存你經常選擇的對象，以備將來使用;

三、最佳化事件效能的建議

 1.延後到$(window).load:
　　有時候採用$(window).load()比$(document).ready()更快，因為後者不等所有的DOM元素都下載完前執行。你應該在使用它之前測試它。

 2.使用Event Delegation:
　　當你在一個容器中有許多節點，你想對所有的節點都綁定一個事件，delegation很適合這樣的應用場景。使用Delegation，我們只需要在父級綁定事件，然後查看哪個子節點(目標節點)觸發了事件。當你有一個很多資料的table的時候，你想對td節點設定事件，這就變得很方便。先獲得 table，然後為所有的td節點設定delegation事件

四、其他常用jQuery效能最佳化建議

　　1. 使用最新版本的jQuery
　　最新的版本往往是最好的。更換了版本後，不要忘記測試你的程式碼。有時候也不是完全向後相容的。

　　2. 使用HMTL5
　　新的HTML5標準帶來的是更輕巧的DOM結構。更輕巧的結構意味著使用jQuery需要更少的遍歷，以及更優良的載入效能。所以如果可能的話請使用HTML5。

　　3. 如果在15個以上的元素加上樣式時，直接為DOM元素加上style標籤
　　要給少數的元素加樣式，最好的方法就是使用jQuey的css()函數。然而更15個以上的較多的元素添加樣式時，直接給DOM添加style 標籤更有效些。這個方法可以避免在程式碼中使用硬編碼(hard code)。

    4. 避免載入多餘的程式碼
　　將Javascript程式碼放在不同的檔案中是個好的方法，僅在需要的時候載入它們。這樣你不會載入不必要的程式碼和選擇器。也便於管理程式碼。

　　5. 壓縮成一個主JS文件，將下載次數保持到最少
　　當你已經確定了哪些文件是應該被載入的，那麼將它們打包成一個文件。用一些開源的工具可以自動幫你完成，例如使用Minify(和你的後端程式碼整合)或使用JSCompressor，YUI Compressor 或 Dean Edwards JS packer等線上工具可以為你壓縮檔案。我最喜歡的是JSCompressor。

　　6. 需要的時候使用原生的Javasript
　　使用jQuery是個很棒的事情，但是不要忘了它也是Javascript的一個框架。所以你可以在jQuery程式碼有必要的時候也使用原生的Javascript函數，這樣能獲得更好的效能。

　　7. 從Google載入jQuery框架
　　當你的應用正式上線的時候，請從Google CDN載入jQuery，因為使用者可以從最近的地方取得程式碼。這樣你可以減少伺服器請求，而使用者如果瀏覽其他網站，而它也使用Google CDN的jQuery時，瀏覽器就會立即從快取中調出jQuery程式碼。