javascript - 大型 HTML 表格在 Chrome 中滚动缓慢

所以我今天在 Google Chrome 中发现了一些奇怪的行为。

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

为了您的快速浏览乐趣，我制作了一个 plunker。您可以调整生成的数据量并亲自查看浏览器如何响应。

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

有没有人遇到过这种情况？这是一个已知的问题？谢谢!

编辑:清晰度

最佳答案

我可以证实你的观察:看起来 IE 和 Firefox 正在做一些优化的渲染(大概是通过使用硬件加速)，但 Chrome 没有。

而且我不同意其他答案，指出您必须使用较小的表格，因为与其他浏览器相比，Chrome 的速度变慢是可以观察到的，即使表格更小，只有几百行，但内容更复杂。

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

transform: translate3d(0, 0, 0);

关于javascript - 大型 HTML 表格在 Chrome 中滚动缓慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45882937/