html - 如何避免溢出 :hidden? 的性能成本

Question

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

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

在 Chrome 中对大型表进行性能分析时，主要的性能 killer 是 overflow:hidden。

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

人们推荐什么来提高性能？

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

更新 1:我包含了一个演示性能问题的文件 here .警告该文件非常大 (25MB)，会降低您的计算机速度。默认情况下，表格不会将溢出设置为隐藏，表格加载后(可能需要一段时间)浏览器性能相对流畅。

但是，如果您编辑文件并取消注释第 12-15 行，然后打开它。加载浏览器后，您会发现 table 周围的响应明显变慢。

Answer 1

仅供引用:我在 iPad/iOS 上遇到过这个问题，导致一个页面在 table-layout:fixed 中有大约一百行的页面出现性能问题。

一旦单元格或单元格中的 div 获得强制单独绘制单元格的属性，绘制大约需要 300 毫秒而不是 100 毫秒(这导致 UI 在我的情况下感觉非常慢).

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

即使在绘制表格后速度也会变慢，因为我在表格上动态弹出一个绝对 div。在分析 javascript 时(使用 (new Date).getTime())，在与表无关的 javascript 中测量到的减速。

[编辑:添加以下部分解决方案]

1. 将所有单元格内容放在 span 元素中(这样可以测量内容的 offsetWidth 而不是包含 block 元素的宽度)。
2. 将行附加到文档后，测试每个 span.offsetWidth 是否大于列宽，如果是，则将“overflow:hidden”添加到包含 block 的样式(或通过类)。
3. 对于某些列可以跳过上面的 1 和 2(如果已知单元格内容永远不需要裁剪)。

注意事项:

1. 仅针对 iOS5 Safari 进行的测量(我没有分析任何其他浏览器)。
2. 对我们有用，因为我们动态创建表格行(使用 javascript 处理您的示例会很慢吗？)。
3. 我们数据的大多数单元格不会溢出(只需要稀疏地裁剪 - 只有有限数量的单元格)。
4. 初始页面加载受到影响(页面中表格的生成时间从 80 毫秒缩短到 800 毫秒)。
5. 但加快了动态组合弹出窗口(340 毫秒缩短到 130 毫秒)，从而提供更好的键盘响应。

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