防止javascript搜索功能減慢瀏覽器

我有一點點的javascript/jquery，在搜索框中按「enter」會遍歷所有錶行，然後隱藏那些不適用/不包含字符串的行。然而，這個過程對於速度較慢的系統是極其重要的，所以我決定實現一個小的加載gif，這樣即使瀏覽器已經凍結，人們也知道發生了一些事情。但問題是，圖像從不出現。我假設這是因爲瀏覽器凍結。所以，現在我的問題。我怎麼能讓循環更快，使用更少的計算能力，並顯示gif？非常感謝防止javascript搜索功能減慢瀏覽器

var $rows = $('tbody tr.visall'); 
$('#search').keydown(function(e) { 
    if (e.keyCode == 13){ 
     $('.load').show(); 
     var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

     $rows.show().filter(function() { 
      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
      return !~text.indexOf(val); 
     }).hide(); 
    }; 
    $('.load').hide(); 
});

編輯：此代碼經過約9000-10000 tr元素。

來源

2014-07-23 Dragongeek

也許值得加入的jsfiddle來解決這個問題，很難進行任何嘗試沒有數據。我會做的一個改變是不使用.hide（）和.show（）。相反，添加和刪除「隱藏」類並處理任何淡入/淡出CSS過渡。這應該將動畫的開銷推到GPU上。 – PeteAUK

@PeteAUK我不能很快掀起一個例子，因爲代碼必須經過數千行數據。 – Dragongeek

我的想法是......在瀏覽器上實現這一點非常困難...我的建議是分頁或者更困難的方法是過濾僅在視口上可用/看到的「tr」（這很難做到） – Kushal

很難說如果它足以滿足您的數據。但這裏是你可以做的：

減少dom操作的數量。您可以添加|刪除類hidden以顯示隱藏行。
如果您的文本是靜態的，您可以創建文本緩存並且不要在每次搜索時提取它。
您可以使用setTimeout延遲搜索執行以顯示加載gif。甚至不知道你會需要一個。在內存中搜索很快。

Demo。

代碼

$(function() { 
    var table = $('#mytable'), //your table 
     rows = table.find('tr').map(function(){ //all rows you need 
      return $(this);  
     }), 
     rowsCache = (function(from){ //text cache 
      return from.map(function(){ 
       return this.text(); 
      }); 
     }(rows)); 

    function delay(func) { //delayed function executor 
     setTimeout(func, 13); 
    } 

    var load = $('#load'); //your loader 

    $('#search').keydown(function(e){ 
     var val; 
     if(e.keyCode === 13) { 
      val = $.trim($(this).val()); 
      load.show(); 
      table.hide(); //release dom 
      delay(function() { 
       //search in text cache 
       var toShow = rowsCache.map(function(_, row) { 
        return row.indexOf(val) > -1; 
       }); 

       rows.each(function(i){ 
        //simply toggle class let css work for you 
        this.toggleClass('hidden', !toShow[i]); 
       });     
       load.hide(); 
       table.show(); 
      }); 
     } 
    });  
});

來源

2014-07-23 08:57:42

個人而言，我會說放下filter和使用CSS選擇器，而不是那麼它只是基本的DOM操作它的jQuery應該進行優化。

的文檔見http://api.jquery.com/contains-selector/和這裏是一個小提琴http://jsfiddle.net/tgz5X/

以下是我在小提琴用一個簡單的例子

function search(mySearchValue) { 
    $("tr > td:contains(" + mySearchValue + ")").show(); 
    $("tr > td:not(:contains(" + mySearchValue + "))").hide();  
}

你會需要更多的，但你應該得到這背後的想法做法。

或者使用filter仍然但是選擇，也可能觸發元素上hide讓更多的DOM manipualtion之後將有show

$("tr td").hide().filter(":contains(" + mySearchValue + ")").show();

來源

2014-07-23 09:20:10 GillesC

你有沒有試過這10k行？ 'contains'不是一個本地選擇器。 –

@gillesc我試着添加行。我放入了大約4k行，並在包含單詞消息的底部添加了一行。它不會很快搜索，出於某種原因，「消息」行在底部。 http://jsfiddle.net/gdLqR/embedded/result/ – Dragongeek

防止javascript搜索功能減慢瀏覽器

回答

相關問題