如何避免溢出的性能成本:隐藏？

Question

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

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

在大型桌面上的Chrome中进行性能分析主要的性能杀手是溢出:隐藏.

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

人们建议什么来提高性能？

如果有必要,我不必使用表标签,但如果可以实现良好的性能,则更愿意坚持使用表标签.

更新1:我已经提供了演示性能问题文件在这里.警告文件相当大(25MB)并且会降低计算机速度.默认情况下,表没有溢出设置为隐藏,并且一旦表已加载(可能需要一段时间)浏览器性能相对平稳.

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

Answer 1

首先，拥有一个表所需的标记量比仅使用带有clear:both css的div来创建新行要大得多。所以这是第一个性能打击。

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

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

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

顺便说一句，1000 行是一个需要交付的重量。

使用 div，您至少可以更轻松地将那些看不见的内容（超出滚动范围）放入带有 display :none的 div 中，直到访问者滚动到它们。

很少有皮肤可供猫猫最有可能从事这项工作，

希望有一些好的想法。