2

我有一个从数据库转储的大 HTML 表（约 10K 行，4 列，仅文本）。我在 Chrome/Firefox 中打开它时遇到性能不佳的问题。

我没有直接访问数据库的权限，所以不可能逐页加载。所有数据都是静态 HTML。

在这种情况下，使用一些 jQuery 插件进行分页是否有助于提高性能？还有其他建议吗？

4

3 回答 3

1

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

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

这并没有改变很少有人（如果有的话）会阅读所有 10,000 行的问题。人们可能会在那里寻找一些特定的数据。最好设置一个搜索表单，让用户得到他想要的东西。

于 2012-08-02T05:58:46.160 回答
0

分页肯定会解决这个问题。您也可以尝试最初将表格样式设置为display: none. 尽管分页可能会在浏览器尝试呈现表格之前生效。

您还可以将表格存储在单独的 html 文件中，对文档进行 ajax 调用，并实现实时滚动。虽然，这取决于您期望用户如何探索数据。如果跳到特定的愤怒喜欢100-199是有用的，分页表将是理想的。

于 2012-08-02T04:11:19.353 回答
0

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

https://github.com/lperrin/infinitable

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

它基本上隐藏了不可见的单元格，同时使排序或过滤单元格变得容易。还有其他解决方案可以实现这一点，但除了 jQuery 之外，这个解决方案没有依赖项。

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

于 2012-08-05T23:25:38.260 回答