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

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

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

在一个大表上用Chrome进行性能分析，主要的性能杀手是溢出：隐藏

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

人们推荐什么来提高绩效

如果有必要，我不必使用表标记，但如果可以实现良好的性能，我更愿意使用表标记

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

---

但是，如果编辑文件并取消注释第12-15行，然后将其打开。您将看到，在加载浏览器后，表格的响应性明显降低。

首先，创建表格所需的标记量远远大于仅将div与clear:tware css一起用于新行。所以这是第一次演出

此外，您正在将溢出设置为类（？）

.ovfl{溢出：隐藏；}

另一方面，1000行是一个需要交付的重量

有了div，你至少有一个更容易的机会将那些看不见的内容（在滚动之外）扔进一个div，并显示：none，直到访问者滚动到它们

在这项工作中，几乎没有人会喜欢

---

霍普有一些好的想法

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

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

---

我以前做过，但是在非常特定的UI约束下。一想到要使用内置的浏览器滚动条等使其一致性，我就有点不知所措。

仅供参考：我在iPad/iOS上遇到了这个问题，导致一个表格中有大约100行的页面出现性能问题，表格布局：已修复

一旦一个单元格或单元格中的div获得一个属性，该属性强制它单独绘制单元格，那么绘制大约需要300毫秒而不是100毫秒（这会导致UI在我的情况下感觉非常慢）

两个属性（

position:relative

或

overflow:hidden

）中的任何一个都给我造成了问题，删除它们优化了速度，但如果单元格文本对于固定宽度的列来说太宽，则会导致文本溢出

即使在绘制了表之后，速度也在放缓，因为我正在动态地在表上方弹出一个绝对div。在分析javascript时（使用

（new Date）.getTime（）

），在javascript中与表无关的地方测量到的速度减慢

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

将所有单元格内容放在

span

元素中（这样可以测量内容的偏移宽度，而不是包含块元素的宽度）

将行追加到文档后，测试每个span.offsetWidth是否大于列宽，如果大于列宽，则将“overflow:hidden”添加到包含块的样式（或通过类）

对于某些列，可以跳过上面的1和2（如果知道单元格内容永远不需要剪裁）

注意事项：

测量仅针对iOS5 Safari（我没有分析任何其他浏览器）

这对我们很有用，因为我们动态地创建表行（使用javascript处理您的示例会很慢？）

我们数据的大多数单元格不会溢出（只需要少量的剪裁-只有有限数量的单元格）

初始页面加载受损（页面中表格的生成从80ms增加到800ms）

但加快了动态组合弹出（340毫秒下降到130毫秒）提供了更好的键盘响应

---

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

与此问题相关，它涵盖了解决此问题所做的工作（有关信息，请参阅bugzilla dependencies）.

不使用分页有什么原因吗？实际上有很多原因。主要是从用户体验的角度。但是你可能会遇到这样的情况：你只有100行，而这个人的电脑速度很慢。提高性能不仅会让拥有大量数据的用户受益，还会让每个人受益。您能发布一个您正在使用的标记和样式的示例吗？这里：我设置了一个12x1800表，每个单元格有400多个字符。性能看起来不错（虽然我不是在一台速度慢的机器上）。另外，你能更具体地说明你关心的性能吗？初始渲染时间、滚动、搜索、DOM操作等。加载表后的一般浏览器性能。滚动、点击等。

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

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