Javascript 包含数千行的HTML表

我有一个服务器，它将提供一个json对象列表，我想在客户端的一个表中显示它们

我最初的直觉是在从服务器获得结果后编辑DOM。从json创建整个表DOM元素，然后对包含该表的元素调用replaceChild

但是，有数千行，并且可能由于其大小，ui在更新表时冻结。此外，这个过程似乎有点老套——直接操作DOM似乎应该在库中完成。我也在考虑实施分页来解决这个忽隐忽现的问题，但再一次，我觉得我在解决一个一般性问题来解决我的具体问题

---

在这里做什么才是正确的？这项任务似乎已经足够普遍了。有没有比破解DOM更好的方法，或者这正是您应该做的事情？

您可以使用类似的方法

通过应用他们称之为自适应虚拟滚动的东西，它具有非常快的渲染速度（非常像@Grim评论的那样）

下面是一段基于基本示例的代码：

HTML:

---

JSON对象上的键必须与columns数组上的字段值匹配.innerHTML将其放在页面上？这似乎比在循环中执行

createElement

和

appendChild

要快。也许您可以一次执行100，当用户将第90个滚动到页面上时加载下一个100。我相信搜索“无限卷轴”应该会得到一些结果。

<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="width:600px;height:500px;"></div>
    </td>
  </tr>
</table>

  var grid;
  var columns = [
    {id: "title",    name: "Title",    field: "title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "start",    name: "Start",    field: "start"},
    {id: "finish",   name: "Finish",   field: "finish"}
  ];

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
  };

  $(function () {
    var data = getYourJSONDataArray();
    grid = new Slick.Grid("#myGrid", data, columns, options);
  });