Javascriptのクライアントサイド検索を最適化することは可能ですか？

Question

は、ここで私は要素の順序なしリストを並べ替えると、ユーザーのクエリに基づいてそれらを削除するために使用しているjQueryの/ JavaScriptコードです：残念ながら

// event binding for the search filter 
$('.search-box').keyup(function(){ 
    var query = $(this).val().toLowerCase(), 
     length = query.length; 

    $('.friends-list li').each(function(){ 
     if(query.length > 1 && $(this).find('span').text().toLowerCase().substring(0, length) != query){ 
      $(this).hide(); 
     } else { 
      $(this).show(); 
     } 
    }); 
}); 

、私はのli要素の大規模な数を取得する場合、これを遅くなり、時にはシステムにハングすることがあります。これを最適化する方法はありますか、最初にすべての検索を行い、li要素を一度にすべて削除して、システムがハングしないようにしますか？

私はサーバー側の検索を行うときに、読み込みスピナーと成功のコールバックを持つことができますが、クライアントサイドには適用されません。

Answer 1

ヒント2つのヒント

各keyupイベントで検索を実行しないでください。

keyup: 
     clearTimeout(searchTimer) 
     searchTimer = setTimeout(doSearch, 200) 

あなたのループは、各反復でそれをチェックする必要が離れて最適化することはできないquery.length <=1場合：代わりに、（〜200msの）次のkeyUpイベントを待ち、何もありません場合は検索を開始する短いタイマーを持っています。

each(li)...find(span)はオーバーヘッドが大きすぎます。スパンを直接反復して試してみてください。

$('.friends-list li span').each(function() { 
    var p = $(this); 
    if(p.text().toLowerCase().indexOf(query) !== 0) { 
     p.parent().hide(); 
    } else { 
     p.show(); 
    } 
}); 

また、上記のコードではマイナーな最適化を行っています。

Answer 2

DOMアップデートを遅らせることは、このようなコードをスピードアップするのに効果的です。 .each（）ループ中ではなく、最後にそれらをすべて行います。

Answer 3

現在、すべてのキーストロークで完全な検索が行われます。少量の時間を待つことができます。 0,2秒間、他のキーが押されたかどうかを確認します。小さな遅延はユーザーの操作には問題ありませんが、目立つことはほとんどありませんが、誰かが単語を入力すると（キーをすばやく押すと）、経験のあるスピードを増やすことができます。

Answer 4

私はまたforループをsignificantly fasterとして使用することをお勧めします。

Answer 5

私はキーストロークの遅れを示唆しています。ユーザーが何時間も入力をやめない限り、検索を行わないようにしています。味。さらに、検索文字列が短すぎるとわかっている場合は、すべてを表示したいので、その場合はループ内の各項目をテストする必要はありません。

(function() { 
    var timerID = null; 

    function doSearch(query) { 
    var length = query.length; 

    if (length <= 1) { 
     $('.friends-list li').show(); 
    } else { 
     $('.friends-list li').each(function(){ 
      var $this = $(this); 
      if($this.find('span').text().toLowerCase() 
             .substring(0, length) != query) 
       $this.hide(); 
      else 
       $this.show(); 
     }); 
    } 
    } 

    $('.search-box').keyup(function(){ 
     var searchString = this.value.toLowerCase(); 

     if (timerID) 
     clearTimeout(timerID); 

     timerID = setTimeout(function() { 
     timerID = null; 
     doSearch(searchString); 
     }, 500); 
    }); 
)(); 

Answer 6

は、そして私は、これは古いですけど、良くセレクタ、キャッシング要素とイベントバブリング（ここでは適用されません）を検討 - 最適化のjQueryの検索を、あなたは優れたヒントの束を取得します。