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

Question

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

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

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

Answer 1

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

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

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

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

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

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

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