1. 首頁 > 生活百科 > >

如何優化jQuery性能？優化方法匯總

小知識it知識

如何優化jQuery性能？下面本篇文章給大家介紹一些針對 jQuery 的優化方法，希望對大家有所幫助！

如何優化jQuery性能？優化方法匯總

文章插圖

我一直在尋找有關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、使用直接函數，而不要使用與與之等同的函數
【如何優化jQuery性能？優化方法匯總】為了獲得更好的性能，你應該使用直接函數如. 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 來測試你的代碼（尤其是插件） 。 我想在另外一個專題來討論這個話題因為實在有太多要說的了 。

推薦閱讀