javascriptslickgrid

SlickGrid flickers when scrolling


I try to use SlickGrid with Dataview as in Optimizing DataView for 500'000 rows example. However when scrolling down using a scroll's thumb the table flickers, it takes a visible moment before anything is painted. When using scroll's arrows or PgUp/PgDn keys everything is fine. This happens only with large tables, in both Chrome and Firefox. I have added video example below. Is there a way to scroll without flickering?

Flickering grid


Solution

  • I am assuming that you might not know that SlickGrid uses Virtual Scrolling to be super performant. So what you see is not flickering, it's actually the concept of Virtual Scrolling that is being used. The concept is that for performance reason, SlickGrid will never create DOM elements for all the dataset rows because especially in the case of that example you pointed out with 500,000 rows, it would need to create millions of DOM elements and that would make your browser extremely slow (or most probably entirely unusable because of memory usage). So to keep performance in check, SlickGrid uses Virtual Scrolling and the concept is to only render (create DOM elements) the rows that are visible to the user (with a bit of a buffer on top/bottom) and not render rows that are hidden to the user, these hidden rows will only be rendered only when they become visible to the user in the viewport (when the user starts scrolling) and is basically at that time that you see the grid viewport turning white for a flash of a second. When you start scrolling, SlickGrid uses Virtual Scrolling to create new DOM elements for the new visible rows and destroy the rows that are no longer visible and again it's for performance reason, the buffer for the visible rows is about 3 extra rows to be rendered on top/bottom of what is already visible, you could increase try to increase the buffer but it's rare that user ever change this option.

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

    There is no way to disable the Virtual Scrolling in SlickGrid and as mentioned earlier, it's for performance reasons.

    I found this React article that describe well what Virtual Scrolling is, there's a small animation that represents it well

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

    the picture below is actually animated in the article and represents very well what Virtual Scrolling is

    enter image description here

    EDIT

    I know it's been a while but I also discovered the grid option scrollRenderThrottling that you could decrease (defaults to 50ms) and you also optionally completely disable it via forceSyncScrolling though use at your own risk as shown below

    Defaults to false, force synchronous scrolling without throttling the UI render when scrolling. Note: it might be risky to disable this option on large dataset, use at your own risk