是否可以在不冻结浏览器的情况下对 HTML 表格进行排序？

Question

我编写了一个网页，其中包含一个包含数百行的 HTML 表。我使用 JavaScript 对页面进行了编程，以便用户可以单击任何列顶部的标题来按该列对表格进行排序。

效果很好，但需要一点时间，因为行太多。我使用 JavaScript array.sort 方法对基础数据进行排序，然后使用该方法将数据行写入页面。

问题是，当用户单击标题时，浏览器会冻结，直到操作完成。有没有办法对我的页面进行编程，以便在对表格进行排序时浏览器不会冻结？

Answer 1

您最好的选择可能是使用现有的 HTML 表格/网格小部件库，它可能已经解决了这个问题。毫无疑问，通过搜索网络可以找到很多。

您可以通过 Ajax 请求在服务器上完成繁重的项目（例如排序），并简单地将现有 DOM 表元素替换为服务器排序处理程序返回的元素。

您也可以编写自己的排序函数，根据需要将控制权交还给浏览器 UI 线程（例如，通过将排序算法从其自然循环分解为使用 setTimeout 或 setInterval 控制的循环）。

Answer 2

如果在您的情况下对表进行排序是一项非常繁重的操作，那么我建议使用 AJAX 进行服务器端排序，或者看看这个新玩具 HTML 5 Web Worker。浏览器是单线程的，因此 UI 线程应该无响应，因为每次代码在客户端执行一些昂贵的操作（未包装在非阻塞回调方法中）时，它都会被阻塞。

Web Worker 的问题在于它并未在所有浏览器中得到广泛支持。但它的作用是将昂贵的客户端 js 计算外包给另一个后台工作人员，同时 UI 线程保持响应。

Answer 3

实现此目的的一种方法是使用 ajax 在服务器端对项目进行排序。

<div id="tableContainer">
   <table>...</table>
</div>

$.ajax({
   url: "/sort"
   data: {items:items, sortField:"id"},
   dataType:"html",
   success: function(sortedTable){
      $("#tableContainer").html(sortedTable);
   }
}

Answer 4

浏览器“冻结”是因为不断地重新绘制页面 - 只需重新绘制一次即可。

您可以显示：无表，对其进行排序，然后再次显示。

或者，您可以在屏幕外构建一个新的排序表，并用排序版本替换现有表。