SlickGrid 滚动时闪烁

Question

我尝试将 SlickGrid 与 Dataview 一起使用，如 Optimizing DataView for 500'000 rows example。然而，当使用卷轴的拇指向下滚动时，表格会闪烁，在绘制任何内容之前需要一个可见的时刻。使用滚动箭头或 PgUp/PgDn 键时一切正常。在 Chrome 和 Firefox 中，这种情况只发生在大表上。我在下面添加了视频示例。有没有办法滚动不闪烁？

Answer 1

我假设您可能不知道 SlickGrid 使用虚拟滚动来实现超级性能。所以你看到的不是闪烁，它实际上是在使用虚拟滚动的概念。这个概念是，出于性能原因，SlickGrid 永远不会为所有数据集行创建 DOM 元素，因为特别是在您指出有 500,000 行的示例中，它需要创建数百万个 DOM 元素，这会使您的浏览器非常慢（或者很可能由于内存使用而完全无法使用）。因此，为了控制性能，SlickGrid 使用虚拟滚动，其概念是只渲染（创建 DOM 元素）用户可见的行（在顶部/底部有一点缓冲区）而不渲染隐藏的行对于用户来说，这些隐藏的行只会在它们在视口中对用户可见时（当用户开始滚动时）才会呈现，并且基本上在那个时候你会看到网格视口瞬间变白。当您开始滚动时，SlickGrid 使用虚拟滚动为新的可见行创建新的 DOM 元素并销毁不再可见的行，这也是出于性能原因，可见行的缓冲区大约有 3 个额外的行要渲染已经可见的顶部/底部，您可以增加尝试增加缓冲区，但用户很少更改此选项。

var data = [];
var columns = [];
var gridOptions = {
  minRowBuffer: 10 // defaults to 3
}
var grid = new Slick.Grid("#myGrid", data, columns, options);

没有办法在 SlickGrid 中禁用虚拟滚动，如前所述，这是出于性能原因。

我发现这篇 React 文章很好地描述了什么是虚拟滚动，有一个小动画很好地代表了它

https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/

下面的图片实际上是文章中的动画，很好地代表了Virtual Scrolling是什么