javascript - 渲染大表的性能问题

Question

我正在尝试使用 html 表格来显示大量数据。在我的例子中是一个 260 列和 117 行的矩阵。

jQuery/Ajax 用于获取数据。而 DataTables + Scroller 来展示这一切。浏览器会卡住数秒以呈现所有内容。我认为这是正常的——关于 javascript 的单线程特性。

不幸的是，一旦渲染出来，浏览器仍然有问题。 react 变得非常迟钝。调整窗口大小，弹出开发工具等......可能是因为它再次运行渲染过程？或者内存消耗可能会飙升？我不知道。

之所以使用 Scroller，是因为很多 行即将到来。它与适度数量的列一起工作得很好。它只获取并显示可见的行。实际上，行数没有限制。 las，列不是这种情况。它们总是包含在内。

有人知道如何“水平”应用相同的技巧吗？通过仅将可见列包含到 DOM 中？

更新

我已经在 J​​SFiddle 上准备了一个示例:url to code

Why does SO need code ?

首先按“添加大表”，然后按“填充表”。等待几秒钟以查看表格出现。花费的时间也显示出来。 “呈现”时间基本上是 DT 调用的持续时间。 “构建”时间是创建整个事物所花费的时间 - 除了调用 DT。

结果的样式并不是我们在这里真正拥有的样式 - 但预期的结果在那里:显示它需要 4/5 秒来渲染它。我不是 JS/CSS/...大师；因此我呼吁帮助找出发生了什么。

为了“模拟”服务器，DT 设置对象被转换为字符串，然后再转换回 JSON 对象。然后才喂给 DT。

有什么明显的方法可以让我尝试加快这个过程吗？

Answer 1

数据表插件 react 灵敏，因为它首先尝试加载所有数据，然后您可以根据需要进行排序/搜索。在大型数据集的情况下，我们可以而且应该做的是加载尽可能多的数据一个 View ，然后单击链接或按钮加载下一个 View 。对于大量的行，实现页面是相当明显的。 [对于那些使用 LINQ 的用户，这可以通过使用 Skip (pagesize(n)) 和 Take (pagesize) 来完成。]

这称为分页，可以通过 jQuery 数据表 API 自动启用。这与服务器端处理一起将大大提高任何 jQuery 数据表的性能。

对于大量列，也只加载适合您 View 的 10 列，然后显示一个链接以加载更多列。单击链接时，加载接下来的 10 列。记下它被点击了多少次，这将帮助您了解要跳过多少列。

有关服务器端处理的更多信息，请参阅 http://datatables.net/release-datatables/examples/data_sources/server_side.html