gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 13:28:51 26 4
gpt4 key购买 nike

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

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

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

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

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

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

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

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

最佳答案

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

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

两个属性(position:relativeoverflow: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 毫秒),从而提供更好的键盘响应。

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

关于html - 如何避免溢出 :hidden? 的性能成本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10609931/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com