HTML 表过滤和重排

我有一个非常大的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");
      }
   }
});