IEで非常に遅いjQuery

Question

要素のリストをフィルタリングするコードを書きました。

HTML：

<div id="ms-simpleCountries" class="ms-container"> 
<div class="ms-selectable"><ul><li style="display: none;" ms-value="fr">France</li><li style="display: none;" ms-value="ca">Canada</li><li ms-value="ar">Argentina</li><li ms-value="pt">Portugal</li></ul></div> 
<div class="ms-selection"><ul><li ms-value="fr">France</li><li ms-value="ca">Canada</li></ul></div> 
</div> 

Javascriptを：

function filterAvailable() 
{ 
var filterText = "ca"; // <-- string used to filter 


var a_val; 
var a_txt; 
$('.ms-container .ms-selectable li').each (function() { 

    // valore elemento disponibile corrente 
    a_val = $(this).attr('ms-value'); // ca 
    a_txt = $(this).text();    // canada 

    // -- 
    if ($('.ms-container .ms-selection [ms-value="' +a_val +'"]').length > 0) 
    { 
     $(this).hide(); 
    } 
    else 
    { 
     if ($(this).text().toUpperCase().indexOf(filterText) >= 0) 
     { 
      $(this).show(); 
     } 
     else 
     { 
      $(this).hide(); 
     } 
    } 

});//each 

}//end 

私はクラスのMS-選択」で約500 <李>要素を持つこのJavaScriptコードをテストしました。 私のIE8でこのコードは10000msで動作し、FFでは1000msで動作します！ IEでこのタスクを実行するにはどうすればよいですか？

ありがとうございます！

Answer 1

ループ、特にDOMとやり取りしているループは、一般に古いブラウザではパフォーマンスが低下する可能性があります。ノンストップタイムトラベルが提案するように、セレクターの最適化を確実にすることで、問題を解決することができます。代わりに、何度も$(this)を繰り返すことで、変数の要素をキャッシュ：jQueryの$.each()方法とは対照的に、また

var $this = $(this); 

は、あなたが一般的にループ「のための」定期的なを使用してパフォーマンスにはかなり大きな後押しを得ることができます。

jsPerfでこれをサポートするために、テストの

function filterAvailable() { 
    var filterText = 'ca'; 
    var items = $('.ms-container .ms-selectable li'); 
    var $currentItem; 
    var a_val; 
    var a_txt; 

    for (var i = 0, j = items.length; i < j; i++) { 
     $currentItem = $(items[i]); // in place of $(this) 

     // Contents of $.each() loop here 
    } 
} 

ロット：http://jsperf.com/jquery-each-vs-for-loop/186

これは、ルックアップを含む任意のDOMの相互作用が、遅いことを覚えておくことが重要です。これは、ページに多くのマークアップがある場合に特に当てはまります。 IDを使用したり、セレクタをキャッシュしたり、DOMのやりとりを最小限に抑えたり、定期的なforループを使用することで、処理速度を向上させることができます。これはNicholas Zakasの偉大なまとめです： http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas