首頁 > web前端 > js教程 > 【整理總結】優化jQuery效能的多種方法

【整理總結】優化jQuery效能的多種方法

青灯夜游
發布: 2022-12-08 14:21:53
轉載
2342 人瀏覽過

如何最佳化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、使用直接函數,而不要使用與與之等同的函數

為了獲得更好的性能,你應該使用直接函數如. 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影片###、###web前端開發###】###

以上是【整理總結】優化jQuery效能的多種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板