JQuery性能優化

1不使用each

jQuery 的each循環比原生的for循環性能相差幾十倍。

2 屬性選擇器選擇 

  儘可能使用ID，類型，類選擇器，避免使用屬性選擇器。

  儘可能使用ID，類，類型選擇器，避免屬性選擇器。ID，類，類型都有原生的方法，屬性選擇器須要遍歷整個DOM，還須要讀取每一個節點的屬性進行判斷，性能很低。

  儘可能不使用祖孫的選擇器，使用父子關係更爲明確的選擇器，也就是使用更能縮小範圍的選擇器，避免大量的遍歷。

3 使用緩存

   定義局部變量，緩存要使用屢次的結果，一方面避免反覆調用，反覆在原型鏈上查找，另外一方面局部變量能夠加快訪問速度。

$('#item').css ('color', '#123456');  
$('#item').html ('hello');  
$('#item').css ('background-color', '#ffffff');  

改成：

$('#item').css ('color', '#123456').html ('hello').css ('background-color', '#ffffff');  
   
// 或者  
var item = $('#item');  
item.css ('color', '#123456');  
item.html ('hello');  
item.css ('background-color', '#ffffff');  

4 避免頻繁的DOM操做

     修改DOM就會致使瀏覽器從新創建DOM樹和渲染，而這在web中是很是耗時的操做。     

var item = $('#list');  
   
for (var i=0; i<1000; i++) {  
    item.append (i);  
}  

改成

var list = '';  
   
for (var i=0; i<1000; i++) {  
    list += '<li>'+i+'</li>';  
}  
   
('#list').html (list);  

或者

var list = [];  
   
for (var i=0; i<1000; i++) {  
    list[i]= '<li>'+i+'</li>';  
}   
('#list').html (list.join(""));  

再或者

var list = [];  
   
for (var i=0; i<1000; i++) {  
    list[i]= '<li>'+i+'</li>';  
}   
('#list')[0].innerHTML =list.join("");  

5 String鏈接優化

對於很大String的鏈接搓澡不要使用concat，使用數組的join