大HTML表格在Chrome中滚动速度慢

k4ymrczo  于 2023-03-16  发布在  Go
关注(0)|答案(6)|浏览(161)

今天我在谷歌浏览器中发现了一些奇怪的行为。
当你把一个包含成千上万行的表格放在一个固定高度div的地方(当数据足够的时候强迫它滚动),它滚动得很慢。10,000行的时候它很慢,100,000行的时候它几乎不能用。但是,在Firefox***和***IE上,无论数据量多少,表格都能正常滚动。
我为您的快速浏览乐趣做了一个小工具,您可以调整生成的数据量,并亲自查看浏览器的响应情况。
https://plnkr.co/edit/3jvTtbk6B837uJsXiP2e?p=preview
同样重要的是要注意,当div被允许延伸到屏幕边缘之外时,这不是一个问题,只有在div上设置了max-heightoverflow: scroll CSS属性时才会发生这种情况。
其他人有过这种经历吗?这是一个已知的问题吗?谢谢!
编辑:澄清度

omjgkv6w

omjgkv6w1#

我可以证实你的观察:看起来IE和Firefox正在做一些优化的渲染(大概是通过使用硬件加速),但Chrome没有。
我不得不不不同意其他的回答,我说你必须使用更小的表格,因为与其他浏览器相比,Chrome的速度下降是可以观察到的,即使表格更小,只有几百行,但内容更复杂。
您可以使用以下命令强制Chrome使用优化渲染

transform: translate3d(0, 0, 0);

参见Sluggish scroll behaviour of large(ish) html table in Google Chrome

mklgxw1f

mklgxw1f2#

如果有很多DOM元素,网站会变得很慢。
为此,您可以尝试一些虚拟滚动插件,如https://github.com/tbranyen/hyperlist
我还没试过这个,但理论上应该有帮助

mlnl4t2r

mlnl4t2r3#

这是一个问题是浏览器本身(它不支持平滑滚动默认)。
这里有一篇文章介绍如何在Chrome上手动启用How to Enable Smooth Scrolling Feature in Google Chrome?
您可以使用@SpeekaDievs插件以编程方式实现这一点

x8diyxa7

x8diyxa74#

溢出导致滚动延迟。请在样式表中更改以下内容:

div {
  max-height: 700px;
  overflow: auto;
}

对此:

div {
  max-height: 700px;
}

如果你决定保持溢出,就没有办法绕过这个缓慢的问题。

wxclj1h5

wxclj1h55#

我在Chrome64上试过了,它消除了滚动问题:

<div id="extra_div" style="overflow-y: scroll;">
    <table style="table-layout:fixed">
       <!-- table-layout fixed is required, not tested if it affects the solution. -->
       <!-- a table with exactly 1000 rows, already sluggish without outer div-->
    </table>
</div>
8iwquhpp

8iwquhpp6#

有点晚进入,但我有一个类似的问题,在这里与一个小得多的表。原来我有硬件加速禁用在 chrome 。后再次启用一切工作顺利。

相关问题