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

如何最佳化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。如有侵權,請聯絡admin@php.cn刪除
jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

jquery中apply()方法怎么用jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具