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

时间:2012-04-05 12:33:49

标签: php html css

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

4 个答案:

答案 0 :(得分:2)

这是我的建议:

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

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

<强> 2。删除CSS3样式

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

第3。页面上的JavaScript?

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

嗯...别的什么?

答案 1 :(得分:2)

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

答案 2 :(得分:0)

您可以使用jqGrid

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

答案 3 :(得分:0)

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

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

祝你好运。