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 / Camino中，在about:config

html5.parser.enable=false

Optimize表格标记
使用DOM methods而不是jQuery

HTML表格过滤和回流

1 个答案: