jQuery性能優化的方法有哪些

今天小編給大家分享一下jQuery性能優化的方法有哪些的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、選擇器性能優化建議

1、總是從#id選擇器來繼承

這是jQuery選擇器的一條黃金法則。jQuery選擇一個元素最快的方法就是用ID來選擇了。

2、在class前面使用tag

jQuery中第二快的選擇器就是tag選擇器（如$(‘head’)），因為它和直接來自于原生的Javascript方法getElementByTagName()。所以最好總是用tag來修飾class(并且不要忘了就近的ID)

jQuery中class選擇器是最慢的，因為在IE 瀏覽器 下它會遍歷所有的DOM節點。盡量避免使用class選擇器。也不要用tag來修飾ID。

3、使用子查詢

將父對象緩存起來以備將來的使用

4、優化選擇器以適用Sizzle的“從右至左”模型

自版本1.3之后，jQuery采用了Sizzle庫，與之前的版本在選擇器引擎上的表現形式有很大的不同。它用“從左至右”的模型代替了“從右至左”的模型。

5、采用find()，而不使用上下文查找

find()函數的確快些。但是如果一個頁面有許多DOM節點時，需要來回查找時，可能需要更多時間:

6、利用強大的鏈式操作

采用jQuery的鏈式操作比緩存選擇器更有效

7、編寫屬于你的選擇器

如果你經常在代碼中使用選擇器，那么擴展jQuery的$.expr[‘:’]對象吧，編寫你自己的選擇器。

二、優化DOM操作建議

8、緩存jQuery對象

將你經常用的元素緩存起來

9、當要進行DOM插入時，將所有元素封裝成一個元素

這里的基本思想是在內存中建立你確實想要的東西，然后更新DOM。這并不是一個jQuery最佳實踐，但必須進行有效的JavaScript操作 。直接的DOM操作速度很慢直接的DOM操作很慢。盡可能少的去更改HTML結構。

10、盡管jQuery不會拋出異常，但開發者也應該檢查對象

盡管jQuery不會拋出大量的異常給用戶，但是開發者也不要依賴于此。jQuery通常會執行了一大堆沒用的函數之后才確定一個對象是否存在。所以在對一個作一系列引用之前，應先檢查一下這個對象存不存在。

11、使用直接函數，而不要使用與與之等同的函數

為了獲得更好的性能，你應該使用直接函數如. a j a x ( ) ， 而 不 要 使 用 .ajax()，而不要使用.ajax()，而不要使用.get(),. g e t J S O N ( ) , .getJSON(),.getJSON(),.post()，因為后面的幾個將會調用$.ajax()。

12、緩存jQuery結果，以備后來使用

你經常會獲得一個javasript應用對象——你可以用App.來保存你經常選擇的對象，以備將來使用

13、采用jQuery的內部函數data()來存儲狀態

不要忘了采用.data()函數來存儲信息

14、使用jQuery utility函數

不要忘了簡單實用的jQuery的 utility函數 。我最喜歡的是$.isFunction(), i s A r r a y ( ) 和 isArray()和isArray()和.each()。

15、為HTML塊添加“JS”的class

當jQuery載入之后，首先給HTML添加一個叫”JS”的class$(‘HTML’).addClass(‘JS’);只有當用戶啟用JavaScript的時候，你才能添加CSS樣式。

三、關于優化事件性能的建議

16、推遲到( w i n d o w ) . l o a d

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

17、使用Event Delegation

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

18、使用ready事件的簡寫

如果你想壓縮js插件，節約每一個字節，你應該避免使用$(document).onready()

四、測試jQuery

19、jQuery單元測試

測試JavaSript代碼最好的方法就是人來測試。但你可以使用一些自動化的工具如 Selenium ， Funcunit ， QUit ， QMock 來測試你的代碼（尤其是插件）。我想在另外一個專題來討論這個話題因為實在有太多要說的了。

20、標準化你的jQuery代碼

經常標準化你的代碼，看看哪個查詢比較慢，然后替換它。你可以用Firebug控制臺。你也可以使用 jQuery的快捷函數來使測試變得更容易些

五、其他常用jQuery性能優化建議

21、使用最新版本的jQuery

最新的版本往往是最好的。更換了版本后，不要忘記測試你的代碼。有時候也不是完全向后兼容的。

22、使用HMTL5

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

23、如果給15個以上的元素加樣式時，直接給DOM元素添加style標簽

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

24、避免載入多余的代碼

將Javascript代碼放在不同的文件中是個好的方法，僅在需要的時候載入它們。這樣你不會載入不必要的代碼和選擇器。也便于管理代碼。

25、壓縮成一個主JS文件，將下載次數保持到最少

當你已經確定了哪些文件是應該被載入的，那么將它們打包成一個文件。用一些開源的工具可以自動幫你完成，如使用 Minify (和你的后端代碼集成)或者使用JSCompressor ， YUI Compressor 或 Dean Edwards JS packer 等在線工具可以為你壓縮文件。我最喜歡的是 JSCompressor 。

26、需要的時候使用原生的Javasript

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

27、從Google載入jQuery框架

當你的應用正式上線的時候，請從Google CDN載入jQuery，因為用戶可以從最近的地方獲取代碼。這樣你可以減少服務器請求，而用戶如果瀏覽其他網站，而它也使用Google CDN的jQuery時，瀏覽器就會立即從緩存中調出jQuery代碼。

28、緩慢載入內容不僅能提高載入速度，也能提高SEO優化，使用Ajax來載入你的網站吧，這樣可以節約服務器端載入時間。你可以從一個常見的側邊欄widget開始。

以上就是“jQuery性能優化的方法有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。