本文較為詳細(xì)分析了jQuery性能優(yōu)化技巧。分享給大家供大家參考。具體分析如下：

一、使用最新版本的jQuery類庫

jQuery新版本會(huì)較上個(gè)版本進(jìn)行Bug修復(fù)和一些優(yōu)化，不過需要注意的是，在更換版本之后，不要忘記測試你的代碼，畢竟有時(shí)候不是完全向后兼容的。

二、使用合適的選擇器

jQuery選擇器性能最佳到最差方式如下：

id選擇器，如$('#id', context)
標(biāo)簽選擇器，如$('p', context)
class選擇器，如$('.class', context)
屬性選擇器，如$('[attribute=value]', context)
偽類選擇器，如$(':hidden', context)

補(bǔ)充及注意事項(xiàng):

盡量給選擇器指定上下文context，可以縮小定位元素的范圍
避免id重復(fù)修飾id，錯(cuò)誤代碼：var $el = $('#list #item1')
避免標(biāo)簽或class修飾id，錯(cuò)誤代碼： var $el = $('ul #item1')
如果使用屬性選擇器，盡量指定所屬的標(biāo)簽選擇器，這樣可以加快訪問速度，正確代碼:var $el = $('a[title="link"]')

三、緩存對象

下面是性能不好的方式：

$('#home').css(...);
$('#home').bind('click', function() {});
$('#home').addClass(...);

說明:jQuery會(huì)在創(chuàng)建每個(gè)選擇器的過程中，查找DOM，消耗時(shí)間與性能。

比較好的方式：

var $homeLink = $('#home', context);
$homeLink.css(...);
$homeLink.bind('click', function() {});
$homelink.addClass(...);

說明:永遠(yuǎn)不要讓相同的選擇器在你的代碼里出現(xiàn)多次。

四、循環(huán)時(shí)的DOM操作

使用jQuery可以很方便的添加，刪除或者修改DOM節(jié)點(diǎn)，但是在一些循環(huán)中，例如for()，while()或者$.each()中處理節(jié)點(diǎn)時(shí)，下面有個(gè)實(shí)例值得大家注意:

var $list = $('#list');
for(var i = 0; i < 100; i++) {
  $list.append('<li>' + i + '</li>');
}

說明:循環(huán)添加li節(jié)點(diǎn)100次，這種操作消耗的性能不低，所以更好的方式是將要添加的節(jié)點(diǎn)在插入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é)果是一個(gè)jQuery對象。在性能方面，建議使用簡單for或者while循環(huán)來處理，而不是$.each()，這樣能使你的代碼更快。

另外注意：檢查長度是一個(gè)檢查jQuery對象是否存在的方式。

var $list = $('#list');
if($list) {  //總是true
  //do something
}
if($list.length) { //擁有元素才返回true
  //do something
}

六、事件代理

每一個(gè)JavaScript事件(如click,mouseover)都會(huì)冒泡到父級節(jié)點(diǎn)。當(dāng)我們需要給多個(gè)元素調(diào)用同一個(gè)函數(shù)時(shí)，這點(diǎn)會(huì)很有用。

...
<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個(gè)li，要綁定100個(gè)事件。顯然，不科學(xué)，性能損耗很多。

更好的方式是：只需向li的父節(jié)點(diǎn)ul綁定一次事件，然后通過event.target獲取到點(diǎn)擊的當(dāng)前元素。

var $list = $('#list');
$list.click(function(e) {
  var $currentItem = $(e.target);  //e.target捕捉到當(dāng)前觸發(fā)事件的目標(biāo)元素
  ...
});

七、將你的代碼轉(zhuǎn)化成jQuery插件

如果每次都花時(shí)間去寫類似的jQuery代碼，那么可以考慮將這部分類似的代碼變成插件，它能夠使你的代碼有更好的重用性，并且能夠有效的幫助你組織代碼。

八、使用Javascript數(shù)組join()來拼接字符串

處理長字符串的時(shí)候，使用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的屬性，來自動(dòng)得到數(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ā)布項(xiàng)目時(shí)，應(yīng)使用“壓縮版”JavaScript文件。

希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。

最新評論