Question

所以我今天在谷歌浏览器中发现了一些奇特的行为。

当您在固定高度div内放置包含数万行的表格时（强制它在有足够数据时滚动），它会慢慢滚动。有10,000行它非常缓慢，有100,000行它几乎无法使用。但是，在Firefox 和 IE上，无论数据量如何，表都会正常滚动。

我为你的快速观看乐趣做了一个掠夺者。您可以调整生成的数据量，并亲自查看浏览器的响应方式。

https://plnkr.co/edit/3jvTtbk6B837uJsXiP2e?p=preview

同样重要的是要注意，当div允许延伸超出屏幕边缘时，这不是问题。只有在div上设置max-height和overflow: scroll CSS属性时才会发生这种情况。

还有其他人经历过这个吗？这是一个已知的问题？谢谢！

编辑：清晰度

Answer 1

我可以确认你的观察：看起来IE和Firefox正在进行一些优化渲染（可能是通过使用硬件加速），但Chrome不是。

我必须不同意其他答案，说明你必须使用较小的表格，因为与其他浏览器相比，Chrome浏览器的速度减慢，甚至更小的表只有几百行，但内容更复杂。

您可以使用

强制Chrome在此处使用优化渲染

transform: translate3d(0, 0, 0);

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

Answer 2

问题在于浏览器本身（默认情况下它不支持平滑滚动）。

以下文章介绍了如何在Chrome上手动启用它 How to Enable Smooth Scrolling Feature in Google Chrome?

您可以使用@SpeekaDievs插件以编程方式实现此目的

Answer 3

溢出导致滚动延迟。在样式表中，更改为：

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

对此：

div {
  max-height: 700px;
}

如果你决定保持溢出，那么就不能解决这个迟缓的问题。

Answer 4

我尝试使用Chrome 64并删除了滚动问题：

<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>

Answer 5

如果有很多DOM元素，网站会变得迟钝。

为此，您可以尝试一些虚拟滚动插件，例如这个 - https://github.com/tbranyen/hyperlist

还没有真正尝试过这个特定的，但理论上应该有所帮助

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

5 个答案: