大型 HTML 表格在 Chrome 中滚动很慢答案

【问题标题】：Large HTML tables are slow to scroll in Chrome大型 HTML 表格在 Chrome 中滚动很慢
【发布时间】：2018-06-01 21:02:56
【问题描述】：

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

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

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

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

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

有没有其他人经历过这种情况？这是一个已知的问题？谢谢！

编辑：清晰度

【问题讨论】：

在 Firefox 和 Chrome 中打开它并没有让我在 Chrome 中显着降低性能……
浏览器从未被设计为显示 100k 行，因为没有一个严肃的网站会在一页上显示 100k 行。就这么简单。这就像你试图用法拉利耕地，然后你来到这里说“嘿，伙计们，这很有趣，我发现法拉利在耕地方面很烂”
我喜欢汽车类比：p
不要使用 Plunker 来处理大量数据，它使用 iframe 进行输出，这需要额外的浏览器实例。没有 Plunker，没有 iframe，没有问题。它自己的html文件中的表格没有任何问题。
@DmitriyKravchuk，当您在 Firefox 中打开 Plunkr 时，该问题不存在。

标签： javascript html google-chrome

【解决方案1】：

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

我不得不不同意其他答案，指出您只需要使用更小的表格，因为与其他浏览器相比，Chrome 的速度变慢了，甚至可以观察到只有几百行但内容更复杂的更小的表格。

你可以强制Chrome在这里使用优化渲染

transform: translate3d(0, 0, 0);

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

【讨论】：

嗯，这真的很有趣。我已经能够在使用该转换属性制作的示例表中修复滚动速度，但是它对我的生产应用程序没有太大影响（这实际上很重要！）。很高兴保留在我的脑海中，谢谢。

【解决方案2】：

嗯，如果有很多 DOM 元素，网站可能会变得迟缓。

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

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

【讨论】：

这也不应该是问题。如果您打开 DevTools 并转到 CSS 并取消选择 overflow: auto 属性，则允许 div 拉伸超过屏幕末端并且性能变得正常。

【解决方案3】：

问题出在浏览器本身（默认不支持平滑滚动）。

这是一篇关于如何在 Chrome 上手动启用它的文章 How to Enable Smooth Scrolling Feature in Google Chrome?

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

【讨论】：

试过了，没用。外部 JS 库是最后的手段。

【解决方案4】：

溢出导致滚动延迟。在你的样式表中，改变这个：

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

到这里：

div {
  max-height: 700px;
}

如果您决定保留溢出，则无法解决缓慢问题。

【讨论】：

这不是 iframe 问题。 Plunkr 可能正在使用 iframe 嵌入示例，但如果您将其保存在本地并通过“打开...”使用 chrome 打开它，它会做同样的事情。
不适合我。要么是JS问题，要么是资源不足。您是否将文件保存在我的答案中并打开它？你还有同样的问题吗？
是的，您提供的 HTML 文件中不存在问题，因为没有任何 CSS。仅当强制执行 max-height 和 overflow: scroll 属性时才会发生这种情况。我想我可以在最初的问题描述中更清楚地说明这一点......
对不起，完全改变了答案。确保 HTML 不在 iframe 中，例如Plunker，并删除导致性能问题的溢出。
移除溢出会导致 div 忽略 max-height 属性，从而允许数据超出页面边缘，从而解决问题。但我需要 div 的高度是固定的，并让数据在其中平滑滚动。

【解决方案5】：

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

【讨论】：