今天小編給大家分享一下jQuery性能優(yōu)化的方法有哪些的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),防城港企業(yè)網(wǎng)站建設(shè),防城港品牌網(wǎng)站建設(shè),網(wǎng)站定制,防城港網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,防城港網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

一、選擇器性能優(yōu)化建議

1、總是從#id選擇器來(lái)繼承

這是jQuery選擇器的一條黃金法則。jQuery選擇一個(gè)元素最快的方法就是用ID來(lái)選擇了。

2、在class前面使用tag

jQuery中第二快的選擇器就是tag選擇器（如$(‘head’)），因?yàn)樗椭苯觼?lái)自于原生的Javascript方法getElementByTagName()。所以最好總是用tag來(lái)修飾class(并且不要忘了就近的ID)

jQuery中class選擇器是最慢的，因?yàn)樵贗E 瀏覽器 下它會(huì)遍歷所有的DOM節(jié)點(diǎn)。盡量避免使用class選擇器。也不要用tag來(lái)修飾ID。

3、使用子查詢(xún)

將父對(duì)象緩存起來(lái)以備將來(lái)的使用

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

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

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

find()函數(shù)的確快些。但是如果一個(gè)頁(yè)面有許多DOM節(jié)點(diǎn)時(shí)，需要來(lái)回查找時(shí)，可能需要更多時(shí)間:

6、利用強(qiáng)大的鏈?zhǔn)讲僮?/strong>

采用jQuery的鏈?zhǔn)讲僮鞅染彺孢x擇器更有效

7、編寫(xiě)屬于你的選擇器

如果你經(jīng)常在代碼中使用選擇器，那么擴(kuò)展jQuery的$.expr[‘:’]對(duì)象吧，編寫(xiě)你自己的選擇器。

二、優(yōu)化DOM操作建議

8、緩存jQuery對(duì)象

將你經(jīng)常用的元素緩存起來(lái)

9、當(dāng)要進(jìn)行DOM插入時(shí)，將所有元素封裝成一個(gè)元素

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

10、盡管jQuery不會(huì)拋出異常，但開(kāi)發(fā)者也應(yīng)該檢查對(duì)象

盡管jQuery不會(huì)拋出大量的異常給用戶(hù)，但是開(kāi)發(fā)者也不要依賴(lài)于此。jQuery通常會(huì)執(zhí)行了一大堆沒(méi)用的函數(shù)之后才確定一個(gè)對(duì)象是否存在。所以在對(duì)一個(gè)作一系列引用之前，應(yīng)先檢查一下這個(gè)對(duì)象存不存在。

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

為了獲得更好的性能，你應(yīng)該使用直接函數(shù)如. a j a x ( ) ， 而 不 要 使 用 .ajax()，而不要使用.ajax()，而不要使用.get(),. g e t J S O N ( ) , .getJSON(),.getJSON(),.post()，因?yàn)楹竺娴膸讉€(gè)將會(huì)調(diào)用$.ajax()。

12、緩存jQuery結(jié)果，以備后來(lái)使用

你經(jīng)常會(huì)獲得一個(gè)javasript應(yīng)用對(duì)象——你可以用App.來(lái)保存你經(jīng)常選擇的對(duì)象，以備將來(lái)使用

13、采用jQuery的內(nèi)部函數(shù)data()來(lái)存儲(chǔ)狀態(tài)

不要忘了采用.data()函數(shù)來(lái)存儲(chǔ)信息

14、使用jQuery utility函數(shù)

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

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

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

三、關(guān)于優(yōu)化事件性能的建議

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

有 時(shí) 候 采 用 (window).load 有時(shí)候采用(window).load有時(shí)候采用(window).load()比$(document).ready()更快，因?yàn)楹笳卟坏人械腄OM元素都下載完之前執(zhí)行。你應(yīng)該在使用它之前測(cè)試它。

17、使用Event Delegation

當(dāng)你在一個(gè)容器中有許多節(jié)點(diǎn)，你想對(duì)所有的節(jié)點(diǎn)都綁定一個(gè)事件，delegation很適合這樣的應(yīng)用場(chǎng)景。使用Delegation，我們僅需要在父級(jí)綁定事件，然后查看哪個(gè)子節(jié)點(diǎn)(目標(biāo)節(jié)點(diǎn))觸發(fā)了事件。當(dāng)你有一個(gè)很多數(shù)據(jù)的table的時(shí)候，你想對(duì)td節(jié)點(diǎn)設(shè)置事件，這就變得很方便。

18、使用ready事件的簡(jiǎn)寫(xiě)

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

四、測(cè)試jQuery

19、jQuery單元測(cè)試

測(cè)試JavaSript代碼最好的方法就是人來(lái)測(cè)試。但你可以使用一些自動(dòng)化的工具如 Selenium ， Funcunit ， QUit ， QMock 來(lái)測(cè)試你的代碼（尤其是插件）。我想在另外一個(gè)專(zhuān)題來(lái)討論這個(gè)話題因?yàn)閷?shí)在有太多要說(shuō)的了。

20、標(biāo)準(zhǔn)化你的jQuery代碼

經(jīng)常標(biāo)準(zhǔn)化你的代碼，看看哪個(gè)查詢(xún)比較慢，然后替換它。你可以用Firebug控制臺(tái)。你也可以使用 jQuery的快捷函數(shù)來(lái)使測(cè)試變得更容易些

五、其他常用jQuery性能優(yōu)化建議

21、使用最新版本的jQuery

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

22、使用HMTL5

新的HTML5標(biāo)準(zhǔn)帶來(lái)的是更輕巧的DOM結(jié)構(gòu)。更輕巧的結(jié)構(gòu)意味著使用jQuery需要更少的遍歷，以及更優(yōu)良的載入性能。所以如果可能的話請(qǐng)使用HTML5。

23、如果給15個(gè)以上的元素加樣式時(shí)，直接給DOM元素添加style標(biāo)簽

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

24、避免載入多余的代碼

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

25、壓縮成一個(gè)主JS文件，將下載次數(shù)保持到最少

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

26、需要的時(shí)候使用原生的Javasript

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

27、從Google載入jQuery框架

當(dāng)你的應(yīng)用正式上線的時(shí)候，請(qǐng)從Google cdn載入jQuery，因?yàn)橛脩?hù)可以從最近的地方獲取代碼。這樣你可以減少服務(wù)器請(qǐng)求，而用戶(hù)如果瀏覽其他網(wǎng)站，而它也使用Google CDN的jQuery時(shí)，瀏覽器就會(huì)立即從緩存中調(diào)出jQuery代碼。

28、緩慢載入內(nèi)容不僅能提高載入速度，也能提高SEO優(yōu)化，使用Ajax來(lái)載入你的網(wǎng)站吧，這樣可以節(jié)約服務(wù)器端載入時(shí)間。你可以從一個(gè)常見(jiàn)的側(cè)邊欄widget開(kāi)始。

以上就是“jQuery性能優(yōu)化的方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。