Question

我有一个HTML表，可以超过1K行和十几列。

我希望列是固定大小（可由用户控制），而不是垂直或水平增长/缩小。因此，在视觉上，特定表格单元格的内容将在一行上，并且溢出在单元格的末尾被切断。

在大型桌面Chrome中进行效果分析，主要的性能杀手是溢出：隐藏。

我已经尝试将每个单元格的内容放在输入中，因为这会复制相同的视觉行为，但这会产生类似的性能影响。

人们建议如何提高绩效？

如果有必要，我不必使用表格标签，但如果可以获得良好的性能，则更愿意坚持使用表格标签。

更新1 ：我添加了一个演示性能问题here的文件。警告文件相当大（25MB）并且会降低计算机速度。默认情况下，表没有溢出设置为隐藏，并且一旦表已加载（可能需要一段时间）浏览器性能相对顺利。

但是，如果您编辑文件并取消注释第12-15行，然后将其打开。你会看到加载桌面后的浏览器响应速度明显较慢。

Answer 1

仅供参考：我在iPad / iOS上遇到了这个问题，导致表格布局中有大约一百行的页面存在性能问题：固定。

一旦一个单元格或一个单元格中的div获得一个强制它单独绘制单元格的属性，它就需要大约300毫秒而不是100毫秒来绘制（这会导致UI对我的情况感到非常缓慢）。

两个属性（position:relative或overflow:hidden）中的任何一个导致了我的问题，删除它们优化了速度，但如果单元格文本对于固定宽度列而言太宽，则会导致文本溢出。

即使在绘制表格之后，也会发生减速，因为我动态地在表格中弹出一个绝对的div。在对javascript进行概要分析时（使用(new Date).getTime()），在javascript中与表无关的地方测量速度减慢。

[编辑：添加以下作为部分解决方案]

注意事项：

根据您的情况，可能会快速首先使用可变宽度列，测量所有列的offsetWidth，将列宽设置为像素宽度并设置溢出：仅在列的offsetWidth大于您将使用的像素宽度的列上隐藏用于列。

Answer 2

您可以尝试使用平铺方法。这是一种非常典型的方法，可以有效地制作无限可侧滚动游戏。

将所有数据放入Javascript数组中，然后在一个有N行可见的表中有N + 1行。向下滚动时，最后一项将移动到视图中。在您滚动得足够远以使第一个项目移出视图的那一刻，您将所有数据向上移动并将滚动位置重置回它开始的位置。如果操作正确，转换将对用户完全透明。您只能在N行可见表中使用N + 1行。

我以前做过这个，但是在非常具体的UI限制下。考虑到使用内置的浏览器滚动条等使其保持一致，我有点快门。

Answer 3

首先，拥有一个表所需的标记量比仅使用带有clear的div要大得多：两个css都是新行。所以这是第一次表演。

另外，您将溢出设置为类（？）

 <style type="text/css"> .ovfl { overflow:hidden; }</style>

  <td class="ovfl"></td>

另外，1000行是一个重量来传递。

对于div，你至少有一个更容易的机会将那些看不见的东西（在滚动之外）扔到一个带有 display：none 的div中，直到访问者滚动到它们。

很少有皮肤可以接受这项工作，

希望有一些好主意。

Answer 4

Webkit bug 75001与此问题有关，它涵盖了解决问题的工作（另请参阅bugzilla依赖关系以获取信息）。