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

Question

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

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

我为你的快速观看乐趣做了一个吸引人的东西.您可以调整生成的数据量,并亲自查看浏览器的响应方式.

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

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

编辑:清晰度

Answer 1

我可以确认你的观察:看起来IE和Firefox正在做一些优化的渲染(大概是通过使用硬件加速),但Chrome不是.

我不得不反对其他答案,说明你必须使用较小的表,因为与其他浏览器相比,Chrome减速可以观察到更小的表,只有几百行,但内容更复杂.

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

transform: translate3d(0, 0, 0);