Jquery 代碼性能改善

從jquery官網看到的，簡單翻譯了一下，很常規的幾個改善方法：

1:  在循環以外添加 （Append Outside of Loops）

  好比代碼1：

代碼1清單：

$.each( myArray, function( i, item ) {
 
    var newListItem = "<li>" + item + "</li>";
 
    $( "#ballers" ).append( newListItem );
 
});

因爲DOM操做會帶來開銷，因此每次循環都操做DOM，性能會差。推薦用一個字符串緩存須要添加的HTML內容，循環以後進行Append。

1  var str = [];
2 $.each( myArray, function( i, item ) {
3  
4      str.push("<li>" + item + "</li>");
5 
6 });
7  $( "#ballers" ).append( str.join('');

 

2: 緩存循環的長度

這個好像地球人都知道：

 

1 var myLength = myArray.length;
2  
3 for ( var i = 0; i < myLength; i++ ) {
4  
5     // do stuff
6  
7 }

 

固然並非全部的時候都要緩存一下循環的長度。好比要循環刪除DOM節點的子節點，由於長度在每次刪除子節點後都會變化。因此經驗不是簡單拿來用哦。

3： 使用detach方法  Detach Elements to Work with Them

   好吧，我認可到如今還不知道detach是幹嗎的，先把官網的東西拿下來，明日繼續研究detach吧。

官網上這麼說的：當想盡可能少的操做某個DOM的時候，能夠用detach方法：

1 var table = $( "#myTable" );
2 var parent = table.parent();
3  
4 table.detach();
5  
6 // ... 要添加超多的row到table上
7  
8 parent.append( table );

4：不要在不存在的DOM元素上進行操做   Don’t Act on Absent Elements

    

 1 // Bad: This runs three functions before it
 2 // realizes there's nothing in the selection
 3 $( "#nosuchthing" ).slideUp();
 4  
 5 // Better:
 6 var elem = $( "#nosuchthing" );
 7  
 8 if ( elem.length ) {
 9  
10     elem.slideUp();
11  
12 }

 

貌似咱們不多去操做不存在的DOM元素，不過官網很快說了，在使用JQuery UI Widget的時候，這個原則很是實用，由於即便這個選擇器不包含任何元素，開銷也是很大滴！

 

4：優化選擇器 Optimize Selectors

     這個其實簡單點，就是儘可能縮小選擇器篩選的範圍。ID選擇器是最快的。

 

 5：當用改變衆多元素樣式的時候使用樣式表而不是用css方法

// Fine for up to 20 elements, slow after that:
$( "a.swedberg" ).css( "color", "#0769ad" );
 
// Much faster:
$( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")
    .appendTo( "head" );