Jquery 代碼效能改善

標籤：style   blog   color   java   使用   os   strong   io   

從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 stuff6  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" );