jQuery性能優(yōu)化技巧分析
本文較為詳細(xì)分析了jQuery性能優(yōu)化技巧。分享給大家供大家參考。具體分析如下:
一、使用最新版本的jQuery類庫
jQuery新版本會較上個版本進(jìn)行Bug修復(fù)和一些優(yōu)化,不過需要注意的是,在更換版本之后,不要忘記測試你的代碼,畢竟有時候不是完全向后兼容的。
二、使用合適的選擇器
jQuery選擇器性能最佳到最差方式如下:
id選擇器,如$('#id', context)
標(biāo)簽選擇器,如$('p', context)
class選擇器,如$('.class', context)
屬性選擇器,如$('[attribute=value]', context)
偽類選擇器,如$(':hidden', context)
補充及注意事項:
盡量給選擇器指定上下文context,可以縮小定位元素的范圍
避免id重復(fù)修飾id,錯誤代碼:var $el = $('#list #item1')
避免標(biāo)簽或class修飾id,錯誤代碼: var $el = $('ul #item1')
如果使用屬性選擇器,盡量指定所屬的標(biāo)簽選擇器,這樣可以加快訪問速度,正確代碼:var $el = $('a[title="link"]')
三、緩存對象
下面是性能不好的方式:
$('#home').css(...); $('#home').bind('click', function() {}); $('#home').addClass(...);
說明:jQuery會在創(chuàng)建每個選擇器的過程中,查找DOM,消耗時間與性能。
比較好的方式:
var $homeLink = $('#home', context); $homeLink.css(...); $homeLink.bind('click', function() {}); $homelink.addClass(...);
說明:永遠(yuǎn)不要讓相同的選擇器在你的代碼里出現(xiàn)多次。
四、循環(huán)時的DOM操作
使用jQuery可以很方便的添加,刪除或者修改DOM節(jié)點,但是在一些循環(huán)中,例如for(),while()或者$.each()中處理節(jié)點時,下面有個實例值得大家注意:
var $list = $('#list'); for(var i = 0; i < 100; i++) { $list.append('<li>' + i + '</li>'); }
說明:循環(huán)添加li節(jié)點100次,這種操作消耗的性能不低,所以更好的方式是將要添加的節(jié)點在插入DOM樹之前全部創(chuàng)建好,再一次性添加到DOM樹中。更好的方式:
var $list = $('#list'), fragment = ''; for(var i = 0; i < 100; i++) { fragment += '<li>' + i + '</li>'; } $list.append(fragment);
五、數(shù)組方式使用jQuery對象
使用jQuery選擇器獲取結(jié)果是一個jQuery對象。在性能方面,建議使用簡單for或者while循環(huán)來處理,而不是$.each(),這樣能使你的代碼更快。
另外注意:檢查長度是一個檢查jQuery對象是否存在的方式。
var $list = $('#list'); if($list) { //總是true //do something } if($list.length) { //擁有元素才返回true //do something }
六、事件代理
每一個JavaScript事件(如click,mouseover)都會冒泡到父級節(jié)點。當(dāng)我們需要給多個元素調(diào)用同一個函數(shù)時,這點會很有用。
... <ul id="list"> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> ... </ul> ... var $item1 = $('#item1'), $item2 = $('#item2'), $item3 = $('#item3'); ... $item1.click(function() {...}); $item2.click(function() {...}); $item3.click(function() {...}); ...
說明:這種方式,如果有100個li,要綁定100個事件。顯然,不科學(xué),性能損耗很多。
更好的方式是:只需向li的父節(jié)點ul綁定一次事件,然后通過event.target獲取到點擊的當(dāng)前元素。
var $list = $('#list'); $list.click(function(e) { var $currentItem = $(e.target); //e.target捕捉到當(dāng)前觸發(fā)事件的目標(biāo)元素 ... });
七、將你的代碼轉(zhuǎn)化成jQuery插件
如果每次都花時間去寫類似的jQuery代碼,那么可以考慮將這部分類似的代碼變成插件,它能夠使你的代碼有更好的重用性,并且能夠有效的幫助你組織代碼。
八、使用Javascript數(shù)組join()來拼接字符串
處理長字符串的時候,使用join()方法有助于優(yōu)化性能。
var arr = []; for(var i = 0; i < 100; i++){ arr[i] = '<li>' + i + '</li>'; } $list.html(arr.join(''));
九、合理利用HTML5的data屬性
HTML5的data屬性可以幫助我們插入數(shù)據(jù),特別是前后端的數(shù)據(jù)交換。jQuery的data()方法,有效的利用HTML5的屬性,來自動得到數(shù)據(jù)。
... <a id="info" data-info-index="23" data-role="linkInfo"></a> ... var $infoLink = $('#info'); var infoIndex = $infoLink.data('info-index'); var type = $infoLink.data('linkInfo');
十、盡量使用原生的JavaScript方法
如:
$(this).css('color': 'blue');
優(yōu)化成:
this.style.color = 'blue';
如:
$('<p></p>');
優(yōu)化成:
$(document.createElement('p'));
十一、壓縮JavaScript
使用壓縮工具壓縮JavaScript文件。
發(fā)布項目時,應(yīng)使用“壓縮版”JavaScript文件。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
jquery實現(xiàn)Slide Out Navigation滑出式菜單效果代碼
這篇文章主要介紹了jquery實現(xiàn)Slide Out Navigation滑出式菜單效果代碼,涉及jquery基于鼠標(biāo)事件操作頁面元素動態(tài)變換的技巧,需要的朋友可以參考下2015-09-09JQuery入門——用bind方法綁定事件處理函數(shù)應(yīng)用介紹
bind()功能是為每個選擇元素的事件綁定處理函數(shù),感興趣的你可以了解下它的語法bind(type, [data], fn),參數(shù)data是作為event.data屬性值傳遞對象的額外數(shù)據(jù)對象,好好學(xué)習(xí)希望本可以幫助到你2013-02-02Bootstrap 時間日歷插件bootstrap-datetimepicker配置與應(yīng)用小結(jié)
這篇文章主要介紹了Bootstrap 時間日歷插件bootstrap-datetimepicker配置與應(yīng)用小結(jié),本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05jQuery模板技術(shù)和數(shù)據(jù)綁定實現(xiàn)代碼
如果你用過ASP.NET的數(shù)據(jù)綁定控件,也用過ASP或者JSP里那種通過輸出HTML元素在頁面上顯示數(shù)據(jù)的方法,你就知道ASP.NET數(shù)據(jù)綁定控件有多么方便。如果能夠?qū)⑼瑯拥墓δ茉跒g覽器端用HTML和JavaScript實現(xiàn),那該是多少美妙的事情。2010-05-05