今天我在谷歌浏览器中发现了一些奇怪的行为。
当你把一个包含成千上万行的表格放在一个固定高度div
的地方(当数据足够的时候强迫它滚动),它滚动得很慢。10,000行的时候它很慢,100,000行的时候它几乎不能用。但是,在Firefox***和***IE上,无论数据量多少,表格都能正常滚动。
我为您的快速浏览乐趣做了一个小工具,您可以调整生成的数据量,并亲自查看浏览器的响应情况。
https://plnkr.co/edit/3jvTtbk6B837uJsXiP2e?p=preview
同样重要的是要注意,当div被允许延伸到屏幕边缘之外时,这不是一个问题,只有在div上设置了max-height
和overflow: scroll
CSS属性时才会发生这种情况。
其他人有过这种经历吗?这是一个已知的问题吗?谢谢!
编辑:澄清度
6条答案
按热度按时间omjgkv6w1#
我可以证实你的观察:看起来IE和Firefox正在做一些优化的渲染(大概是通过使用硬件加速),但Chrome没有。
我不得不不不同意其他的回答,我说你必须使用更小的表格,因为与其他浏览器相比,Chrome的速度下降是可以观察到的,即使表格更小,只有几百行,但内容更复杂。
您可以使用以下命令强制Chrome使用优化渲染
参见Sluggish scroll behaviour of large(ish) html table in Google Chrome
mklgxw1f2#
如果有很多DOM元素,网站会变得很慢。
为此,您可以尝试一些虚拟滚动插件,如https://github.com/tbranyen/hyperlist
我还没试过这个,但理论上应该有帮助
mlnl4t2r3#
这是一个问题是浏览器本身(它不支持平滑滚动默认)。
这里有一篇文章介绍如何在Chrome上手动启用How to Enable Smooth Scrolling Feature in Google Chrome?
您可以使用@SpeekaDievs插件以编程方式实现这一点
x8diyxa74#
溢出导致滚动延迟。请在样式表中更改以下内容:
对此:
如果你决定保持溢出,就没有办法绕过这个缓慢的问题。
wxclj1h55#
我在Chrome64上试过了,它消除了滚动问题:
8iwquhpp6#
有点晚进入,但我有一个类似的问题,在这里与一个小得多的表。原来我有硬件加速禁用在 chrome 。后再次启用一切工作顺利。