HTML表格過濾和迴流

Question

我有一個非常大的HTML表，900 +行。根據過濾器的值，我可以通過遍歷行和隱藏/顯示行來啓用篩選。

這是問題所在。當我隱藏/顯示500多行時，頁面在瀏覽器忙於迴流時完全無響應。我曾嘗試在過濾之前隱藏表格，克隆表格，然後替換表格等。但是，無響應仍然是一個問題，因爲它阻止了我在瀏覽器重畫時使用「動畫」加載圖像。

分頁不是一個選項，也不是惰性滾動。

這裏是循環：

var rows = null; 
$("#mavis-filters").find("input:checkbox").on("click", function() { 
    var id, i;  
    if (!rows) { 
     rows = document.getElementById("taskOverview").querySelectorAll("tr"); 
    } 
    id = this.id; 
    i = rows.length; 

    while (i--) { 
     var row = rows[i]; 
     if (row.dataset.project === id) { 
     row.classList.toggle("row-hidden"); 
     } 
    } 

}); 

Answer 1

使用漸進式渲染來解決此問題。以下是如何在每個瀏覽器應用它：

• 使用table-layout:fixed使漸進式渲染
• 在Firefox /卡米諾，在about:config
• Optimize表格標記
• 使用DOM methods而不是jQuery的
設置 html5.parser.enable=false