jQuery代碼性能優化

代碼優化是一個很重要的開發態度，一點點的優化對于程序來講可能是微乎其微的，但是把所有的一點都加起來就能夠達到水滴石穿的效果，所以要在平時的開發過程中養成優化代碼的好習慣。

1. 檢測元素是否存在

避免對當前頁面上不存在的元素執行操作

var ele = $("#somethingThatisNotHere");  
if ( ele[0] ) {  
   ele.text("Some text").slideUp(300).addClass("editing");  
}

2. 使用id取代class

使用高效的選擇器，jQuery是使用JavaScript自身的getElementById方法來按照id查找元素。而當使用class選擇器來查找元素時，jQuery是使用自身的方法來獲取元素（至少在部分老的瀏覽器中是如此）。

我們將使用不同的選擇器來尋找第二個li元素。然后我們對每種選擇器進行測試，看看他們在性能上的差異。第一種辦法，也是最簡單的，我們直接使用selected class來指向元素，然后我們看看Firebug profiler返回的結果。

console.profile() ;  
$(".selected");  
console.profileEnd();

返回的結果是0.30毫秒。接下來我們添加一個標簽名，來縮小范圍。這次我們通過使用document.getElementsByTagName來指定selected的DOM元素，以此縮小查找范圍。

console.profile() ;  
$("li.selected");  
 console.profileEnd();

成績是 0.291毫秒，減少了0.02毫秒。因為我們是在Firefox中測試的，這里的提高有點微不足道，但是它在老的瀏覽器中所帶來的性能提供卻是顯著的，像IE6瀏覽器。

接下來，我們從他的父元素的ID開始查找：

console.profile() ;  
$("#someList .selected");  
console.profileEnd();

成績是:0.283毫秒。現在讓我們聲明更具詳細點，我們在祖先元素ID后面指定元素類型。

console.profile() ;  
$("#someList li.selected");  
console.profileEnd();

成績是：0.275毫秒。又減少了一點時間。最后讓我們直接通過ID來指向元素：

console.profile() ;  
$("#mainItem");  
console.profileEnd();

成績是：0.165毫秒。提高驚人！這個測試向你展示了使用JS自帶方法的執行速度有多快。注意雖然許多新型的瀏覽器可以享受getElementsByClassName帶來的好處，但是老的瀏覽器不行——這回會導致代碼效率急劇下降。所以在寫代碼的時候，牢記這點。

3、避免查詢浪費

$("#mainItem").hide().val("Hello").html("Oh, hey there!").show();