是否可以優化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

幾個提示

不要在每個keyup事件上觸發搜索。 相反，有一個等待下一個密鑰的短計時器（~200ms）並開始搜索是否沒有：

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

如果query.length <=1您的循環可以被優化掉，不需要在每次迭代時檢查它。

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

我還建議使用for循環，因為它明顯更快 。

Answer 3

推遲DOM更新是加速此類代碼的有效方法。 最后完成所有操作，而不是在.each（）循環中完成。

Answer 4

我建議延遲按鍵，這樣你就不會進行搜索，直到用戶停止輸入一段時間 - 比如半秒鍾，盡管你可以嘗試一下並調整它來嘗試。 另外，我對您的搜索進行了一些小的更改，例如，如果您知道搜索字符串太短，您只想顯示所有內容，因此在這種情況下不需要在循環中測試每個項目。

(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 5

我知道這是舊的，但考慮更好的選擇器，緩存元素和事件冒泡（這里不適用） - 搜索優化jQuery，你會得到一堆很棒的技巧。

Answer 6

目前，您可以在每個擊鍵時觸發完整搜索。 您可能希望等待一小段時間。 說0秒，然后檢查是否按下了另一個鍵。 小延遲對於用戶體驗應該是可以的，甚至幾乎不可察覺，但如果有人在輸入一個單詞（快速連續按鍵），這可以節省許多迭代，增加了經驗的速度。