如何加快包含大量表格单元格的页面？

Question

在我的项目中，我在一个页面上有一个24 * 6 * 300单元格的表格（它是用于呈现统计数据的脚本） - 24小时小时* 6列10分钟* 300行。每个单元格都有提示弹出窗口和附加信息。问题是，它非常慢。不仅渲染，而且整个页面也与页面一起工作。如果我想加快速度，你会推荐什么？ （用div替换细胞？用ul？将表格渲染为图像并使用imagemap进行悬停效果？）

Answer 1

这是我的建议：

<强> 1。 Paginate和/或消除混乱

也许你每页只能显示一小时的数据？也许你可以在屏幕上简化和显示基本信息，并在用户特别要求时提供更全面的结果？

<强> 2。删除CSS3样式

文本阴影，转换等需要占用大量CPU。如果它们对性能有重要影响，请将其删除。在我看来，一个更好的页面是一个快速和丑陋的页面，而不是一个美丽的，非常slllllooooooowwwww ...

第3。页面上的JavaScript？

精确定位泄漏，优化，重构。

嗯...别的什么？

Answer 2

我希望您在浏览器可见区域中不显示43200个对象，考虑在用户滚动事件上添加行并删除当前不在可见区域中的行。

Answer 3

您可以使用jqGrid

以奇特的方式呈现大型数据表

Answer 4

您似乎担心特定DOM元素会占用更多内存/处理器。在你的情况下，你最终可能会使用表而不是div来获得额外的元素。但是，要在功能和视觉上最终得到同样的东西，你最终会陷入混乱，很快变得无法维护。你需要一堆乱七八糟的CSS和一些JavaScripting来使它工作。更不用说在语义上它将毫无意义。表格用于表格数据，就像你拥有的那样。

现在你可能会疯狂并尝试从头开始编码，或者你可以使用众多工具之一来完成工作。我建议利用其他人的辛勤工作并使用免费提供的工具。考虑使用Data Tables。您可能需要某种分页或“无限滚动”/延迟加载解决方案。数据表带有一个额外的“滚动条”，可以为您处理无限滚动。

祝你好运。