js jQuery效能優化（一）

來自於《鋒利的jquery》

1、使用最新版本的jquery類庫

jquery每乙個新的版本都會較上一版本進行bug修復和一些優化，同時也會包含一些創新，所以建議使用最新版本的jquery來提高效能。

2、使用合適的選擇器

①、$("#id")

使用id來定位dom元素無疑是最佳提高效能的方式，因為jquery底層將直接呼叫本地方法document.getelementbyid()。如果這個方法不能直接找到你需要的元素，那麼可以考慮呼叫find()方法。**如下：

$("#content").find("div")

使用以上**可以有效的縮小定位的dom元素。為了提高效能，建議從最近的id元素開始往下搜尋。

②、$("p"),$("div"),$("input")

標籤選擇器的效能也是不錯的，它是效能優化的第二選擇。

③、$(".class")

對於ie9+，將使用本地方法document.getelementbyclassname()，而對於較老的瀏覽器，只能靠使用dom搜尋的方式來實現，這無疑對效能產生較大的影響。

④、$("[attribute=value]")

對於使用屬性來定位dom元素，本地js方法中並沒有直接地實現，大多都是使用dom搜尋方式來達到效果，很多瀏覽器支援queryselectorall()方法，但是不同瀏覽器間的效能還是有區別。總的來說，使用這種方法來定位dom元素，效能並不是非常理想。盡量避免。

⑤、$(":hidden")

jquery需要搜尋每乙個元素來定位偽選擇器，具有較大的效能問題。如果堅持使用這種方式，請先使用id選擇器定位父元素後再使用該選擇器。

總結：1、盡量使用id選擇器。2、盡量給選擇器指定上下文。

3、快取物件

jquery會在建立每乙個選擇器的過程中，查詢dom，建立多個jquery物件。可以將多次使用的jquery物件快取下來。

所以，永遠不要讓相同的選擇器在你的**裡出現多次。

4、迴圈時的dom操作

在for、while、each中處理節點，應避免多次的dom操作，比如在中插入，不要每次迴圈插入乙個，應該將整個元素字串在插入dom之前全部建立好再一次性插入。