JQuery性能優(yōu)化的幾點(diǎn)建議
針對(duì)jquery性能優(yōu)化這個(gè)主題,想必大家都有所了解。下面是我搜集點(diǎn)一點(diǎn)資料關(guān)于jquery性能優(yōu)化,大家可以參考參考。
一、選擇器性能優(yōu)化建議
1. 總是從#id選擇器來繼承:這是jQuery選擇器的一條黃金法則。jQuery選擇一個(gè)元素最快的方法就是用ID來選擇了;
2. 在class前面使用tag:jQuery中第二快的選擇器就是tag選擇器(如$(‘head')),因?yàn)樗椭苯觼碜杂谠腏avascript方法getElementByTagName()。所以最好總是用tag來修飾class(并且不要忘了就近的ID);
3. 使用子查詢:將父對(duì)象緩存起來以備將來的使用;
4. 采用find(),而不使用上下文查找;
5. 利用強(qiáng)大的鏈?zhǔn)讲僮?采用jQuery的鏈?zhǔn)讲僮鞅染彺孢x擇器更有效;
二、優(yōu)化DOM操作建議
1.緩存jQuery對(duì)象: 將你經(jīng)常用的元素緩存起來;
2. 當(dāng)要進(jìn)行DOM插入時(shí),將所有元素封裝成一個(gè)元素:
這里的基本思想是在內(nèi)存中建立你確實(shí)想要的東西,然后更新DOM。這并不是一個(gè)jQuery最佳實(shí)踐,但必須進(jìn)行有效的JavaScript操作 。直接的DOM操作速度很慢
直接的DOM操作很慢。盡可能少的去更改HTML結(jié)構(gòu)。
3.使用直接函數(shù),而不要使用與與之等同的函數(shù):為了獲得更好的性能,你應(yīng)該使用直接函數(shù)如$.ajax(),而不要使用$.get(),$.getJSON(),$.post(),因?yàn)楹竺娴膸讉€(gè)將會(huì)調(diào)用$.ajax()。
4. 緩存jQuery結(jié)果,以備后來使用:
你經(jīng)常會(huì)獲得一個(gè)javasript應(yīng)用對(duì)象——你可以用App.來保存你經(jīng)常選擇的對(duì)象,以備將來使用;
三、關(guān)于優(yōu)化事件性能的建議
1.推遲到$(window).load:
有時(shí)候采用$(window).load()比$(document).ready()更快,因?yàn)楹笳卟坏人械腄OM元素都下載完之前執(zhí)行。你應(yīng)該在使用它之前測(cè)試它。
2.使用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è)置事件,這就變得很方便。先獲得 table,然后為所有的td節(jié)點(diǎn)設(shè)置delegation事件
四、其他常用jQuery性能優(yōu)化建議
1. 使用最新版本的jQuery
最新的版本往往是最好的。更換了版本后,不要忘記測(cè)試你的代碼。有時(shí)候也不是完全向后兼容的。
2. 使用HMTL5
新的HTML5標(biāo)準(zhǔn)帶來的是更輕巧的DOM結(jié)構(gòu)。更輕巧的結(jié)構(gòu)意味著使用jQuery需要更少的遍歷,以及更優(yōu)良的載入性能。所以如果可能的話請(qǐng)使用HTML5。
3. 如果給15個(gè)以上的元素加樣式時(shí),直接給DOM元素添加style標(biāo)簽
要給少數(shù)的元素加樣式,最好的方法就是使用jQuey的css()函數(shù)。然而更15個(gè)以上的較多的元素添加樣式時(shí),直接給DOM添加style 標(biāo)簽更有效些。這個(gè)方法可以避免在代碼中使用硬編碼(hard code)。
4. 避免載入多余的代碼
將Javascript代碼放在不同的文件中是個(gè)好的方法,僅在需要的時(shí)候載入它們。這樣你不會(huì)載入不必要的代碼和選擇器。也便于管理代碼。
5. 壓縮成一個(gè)主JS文件,將下載次數(shù)保持到最少
當(dāng)你已經(jīng)確定了哪些文件是應(yīng)該被載入的,那么將它們打包成一個(gè)文件。用一些開源的工具可以自動(dòng)幫你完成,如使用Minify(和你的后端代碼集成)或者使用JSCompressor,YUI Compressor 或 Dean Edwards JS packer等在線工具可以為你壓縮文件。我最喜歡的是JSCompressor。
6. 需要的時(shí)候使用原生的Javasript
使用jQuery是個(gè)很棒的事情,但是不要忘了它也是Javascript的一個(gè)框架。所以你可以在jQuery代碼有必要的時(shí)候也使用原生的Javascript函數(shù),這樣能獲得更好的性能。
7. 從Google載入jQuery框架
當(dāng)你的應(yīng)用正式上線的時(shí)候,請(qǐng)從Google CDN載入jQuery,因?yàn)橛脩艨梢詮淖罱牡胤将@取代碼。這樣你可以減少服務(wù)器請(qǐng)求,而用戶如果瀏覽其他網(wǎng)站,而它也使用Google CDN的jQuery時(shí),瀏覽器就會(huì)立即從緩存中調(diào)出jQuery代碼。
相關(guān)文章
servlet+jquery實(shí)現(xiàn)文件上傳進(jìn)度條示例代碼
現(xiàn)在文件的上傳,特別是大文件上傳,都需要進(jìn)度條。這篇文章主要介紹了servlet+jquery實(shí)現(xiàn)文件上傳進(jìn)度條示例代碼,有興趣的可以了解一下。2017-01-01
jQuery實(shí)現(xiàn)B2B網(wǎng)站后臺(tái)管理系統(tǒng)側(cè)導(dǎo)航
這篇文章主要介紹了jQuery實(shí)現(xiàn)B2B網(wǎng)站后臺(tái)管理系統(tǒng)側(cè)導(dǎo)航,文中示例代碼非常詳細(xì),幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07
firefox瀏覽器用jquery.uploadify插件上傳時(shí)報(bào)HTTP 302錯(cuò)誤
這篇文章主要介紹了firefox瀏覽器用jquery.uploadify插件上傳時(shí)報(bào)HTTP 302錯(cuò)誤,分析了下,原來是利用flash進(jìn)行post上傳時(shí)沒有包含原來的session信息,而是重新創(chuàng)建了一個(gè)session,知道原因了,我們來看看如何解決吧。2015-03-03
jQuery新的事件綁定機(jī)制on()示例應(yīng)用
從jQuery1.7開始,jQuery引入了全新的事件綁定機(jī)制,on()和off()兩個(gè)函數(shù)統(tǒng)一處理事件綁定,下面通過示例為大家介紹下2014-07-07
基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果
這篇文章主要介紹了基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-11-11
jQuery EasyUI API 中文文檔 - Calendar日歷使用
jQuery EasyUI API 中文文檔 - Calendar日歷使用,需要的朋友可以參考下。2011-10-10
基于jQuery實(shí)現(xiàn)的水平和垂直居中的div窗口
在建立網(wǎng)頁布局的時(shí)候,我們經(jīng)常會(huì)面臨一個(gè)問題,就是讓一個(gè)div實(shí)現(xiàn)水平和垂直居中,雖然好幾種方式實(shí)現(xiàn),但是今天介紹時(shí)我最喜歡的方法,通過css和jQuery實(shí)現(xiàn)。2011-08-08
jquery實(shí)現(xiàn)簡(jiǎn)單Tab切換菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單Tab切換菜單效果的相關(guān)資料,需要的朋友可以參考下2016-06-06

