|
現(xiàn)在已經(jīng)有很多文章討論jQuery和JavaScript的性能問題,，然而,，在這篇文章中我計劃總結(jié)一些提升速度的技巧和一些我自己的建議來改善你的jQuery和JavaScript代碼。更好的代碼意味著更快的應(yīng)用程序,，快速渲染和反應(yīng)性意味著一個更好的用戶體驗,。
首先，我們要記住最重要的一點是：jQuery也是javascript,，也就是意味著我們要對jQuery和javascript使用相同的編碼規(guī)則和風(fēng)格指南,，還有最佳實踐。
另外,，如果你是一個javascript的初學(xué)者，那么我建議你在開始jQuery之前看一下JavaScript best practices for beginners 和 writing high quality JavaScript這兩篇文章。
如果你已經(jīng)開始使用jQuery了,，那么我強(qiáng)烈建議遵守下面的建議：
緩存變量
DOM的遍歷是非常昂貴的,，所以盡量緩存一些可能會被重新用到的變量。
|
1
2
3
4
5
6
7
8
9
10 |
h = $('#element').height();
$('#element').css('height',h-20);
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
|
避免全局變量
使用jQuery和使用javascript一樣,，最好確保你的變量在你的函數(shù)作用域內(nèi),。
|
1
2
3
4
5
6
7
8
9
10
11 |
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);
|
使用匈牙利命名法
在變量前加上一個$符號，很容易看出來這是一個jQuery變量,。
|
1
2
3
4
5
6
7
8
9
10
11 |
var first = $('#first');
var second = $('#second');
var value = first.val();
var $first = $('#first');
var $second = $('#second'),
var value = $first.val();
|
使用 Var 鏈（單 Var 模式）
不要使用多個var聲明,，可以將它們合并為一個var聲明，建議將沒有指定值的變量放在最后,。
|
1
2
3
4
5
6
7
8
9 |
var
$first = $('#first'),
$second = $('#second'),
value = $first.val(),
k = 3,
cookiestring = 'SOMECOOKIESPLEASE',
i,
j,
myArray = {};
|
最好使用on 綁定事件
最新版本的jQuery已經(jīng)將click()改變?yōu)楹瘮?shù)on('click')的簡寫,。在之前的版本中實現(xiàn)的不同,click()簡寫bind()。在jQuery 1.7中,on()是首選方法用于附加事件處理程序,。然而,對于一致性可以簡單地使用on(),。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});
$first.hover(function(){
$first.css('border','1px solid red');
})
$first.on('click',function(){
$first.css('border','1px solid red');
$first.css('color','blue');
})
$first.on('hover',function(){
$first.css('border','1px solid red');
})
|
壓縮精簡javascript
一般來說,，我們要盡可能的合并函數(shù)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});
$first.on('click',function(){
$first.css({
'border':'1px solid red',
'color':'blue'
});
});
|
使用鏈?zhǔn)讲僮?/STRONG>
根據(jù)上面的規(guī)則,，jQuery很容易將方法鏈接在一起，我們要利用這一優(yōu)點,。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
|
保持代碼的可讀性
當(dāng)精簡了javascript代碼和使用了鏈?zhǔn)讲僮鳎愕拇a有時候會變得不可讀,，盡量使用縮進(jìn)和換行使代碼變得漂亮些,。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
$second.html(value);
$second
.on('click',function(){ alert('hello everybody');})
.fadeIn('slow')
.animate({height:'120px'},500);
|
使用短路求值
短路求值是一個從左到右求值的表達(dá)式，用 &&（邏輯與）或 || （邏輯或）操作符,。
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
function initVar($myVar) {
if(!$myVar) {
$myVar = $('#selector');
}
}
function initVar($myVar) {
$myVar = $myVar || $('#selector');
}
|
使用快捷的方式
精簡代碼的方式之一就是利用一些編碼捷徑,。
|
1
2
3
4
5
6
7 |
if(collection.length > 0){..}
if(collection.length){..}
|
復(fù)雜的操作要分離元素
如果對DOM元素做大量操作（連續(xù)設(shè)置多個屬性或css樣式），建議首先分離元素然后在添加,。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
var
$container = $("#container"),
$containerLi = $("#container li"),
$element = null;
$element = $containerLi.first();
var
$container = $("#container"),
$containerLi = $container.find("li"),
$element = null;
$element = $containerLi.first().detach();
$container.append($element);
|
了解技巧
你可能對使用jQuery中的方法缺少經(jīng)驗，一定要查看的文檔,，可能會有一個更好或更快的方法來使用它,。
|
1
2
3
4
5
6
7 |
$('#id').data(key,value);
$.data('#id',key,value);
|
使用子查詢緩存的父元素
像之前提到的一樣，DOM的遍歷的代價很大,，典型做法是緩存父元素并在選擇子元素時重用這些緩存元素,。
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
var
$container = $('#container'),
$containerLi = $('#container li'),
$containerLiSpan = $('#container li span');
var
$container = $('#container '),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');
|
避免通用選擇符
當(dāng)和其他的選擇符一起使用時,，通用選擇符非常的慢,。
|
1
2
3
4
5
6
7 |
$('.container > *');
$('.container').children();
|
避免使用隱式通用選擇符
當(dāng)你漏下了選擇符，通用選擇符(*)仍然起作用
|
1
2
3
4
5
6
7 |
$('.someclass :radio');
$('.someclass input:radio');
|
優(yōu)化選擇符
例如,，Id選擇符應(yīng)該是唯一的，所以沒有必要添加額外的選擇符,。
|
1
2
3
4
5
6
7
8 |
$('div#myid');
$('div#footer a.myLink');
$('#myid');
$('#footer .myLink');
|
避免多個ID選擇符
再次強(qiáng)調(diào)ID 選擇符應(yīng)該是唯一的，不需要添加額外的選擇符,，更不需要多個后代ID選擇符,。
|
1
2
3
4
5
6
7 |
$('#outer #inner');
$('#inner');
|
盡量使用最新版本
新版本通常更好：更輕量級,，更高效。顯然,，你需要考慮你要支持的代碼的兼容性,。例如，2.0版本不支持ie 6/7/8,。
不要使用被棄用的方法
關(guān)注每個新版本的廢棄方法是非常重要的并盡量避免使用這些方法,。
|
1
2
3
4
5
6
7
8
9
10 |
/ bad - live is deprecated
$('#stuff').live('click', function() {
console.log('hooray');
});
$('#stuff').on('click', function() {
console.log('hooray');
});
|
利用CDN加載加載jQuery
谷歌的CND能保證選擇離用戶最近的緩存并迅速響應(yīng),地址是http://code.jQuery.com/jQuery-latest.min.js
必要時組合jQuery和javascript原生代碼
上所述，jQuery就是javascript,，這意味著用jQuery能做的事情,，同樣可以用原生代碼來做。原生代碼的可讀性和可維護(hù)性可能不如jQuery,，而且代碼更長,。但也意味著更高效（通常更接近底層代碼可讀性越差，性能越高,，例如：匯編,，當(dāng)然需要更強(qiáng)大的人才可以）。記住沒有任何框架能比原生代碼更小,，更輕,，更高效。
最后忠告
最后,，寫這篇文章的目的是提高jQuery的性能和給出一些好的建議,。如果你想深入的研究對這個話題你會發(fā)現(xiàn)很多樂趣。記住,，jQuery并非不可或缺,，僅是一種選擇。思考為什么要使用它,。DOM操作,？ajax,？模版？css動畫,？還是選擇符引擎,？有時候，javascript微型框架或jQuery的需求定制版同樣是值得考慮的,。
|
