静态HTML表上的分页是否有助于提高性能

Question

我有一个从数据库中转储的大型HTML表（~10K行，4列，仅文本）。在Chrome / Firefox中打开它时，我的性能很差。

我没有直接访问数据库，因此无法逐页加载。所有数据都是静态HTML。

在这种情况下，对某些jQuery插件的分页是否有助于提高性能？还有其他建议吗？

Answer 1

如果适用，设置table-layout: fixed有助于缩短渲染时间。缓慢主要是由于在默认表格布局方法中，浏览器必须解析并处理整个表格，计算所有单元格的宽度要求，然后才能渲染表格的任何部分。

固定布局告诉浏览器根据第一行设置列宽（注意可能适用于它的任何CSS）。如果宽度不适合其他行，这当然可能导致混乱。对于行通常非常相似的数据表，可以适当地设置宽度。

这并没有改变很少人（如果有的话）会读取所有10,000行的问题。人们可能会在那里寻找一些具体的数据。设置一个允许用户得到他想要的搜索表单可能会更好。

Answer 2

我遇到了类似的问题并制作了一个jQuery插件：

https://github.com/lperrin/infinitable

要使用它，您可以使用Ajax调用加载所有数据，将其转换为一个巨大的数组，并将其传递给插件。

它基本上隐藏了不可见的单元格，同时可以轻松地对单元格进行排序或过滤。还有其他解决方案可以实现这一点，但除了jQuery之外，这个解决方案没有依赖关系。

该项目包含一个包含100,000个元素的表的演示。