Grid performance degrades significantly when rows are hidden

Posted by: taran.twomey on 21 April 2022, 11:17 am EST

  • Posted 21 April 2022, 11:17 am EST

    Hi,

    I have noticed that there is a significant drop in scrolling performance when a number of rows have their visible property set to false. This seems to me as if these rows are still being rendered ( or at least run through the render cycle ) and then just removed or hidden at the last step, which doesn't seem like the best solution. Surely a row with a visible property of false should never be rendered or processed to begin with?

    I have made a stackblitz showcasing this problem here: https://stackblitz.com/edit/angular-5uyjot?file=src/app/app.component.ts

    You can see in the stackblitz that the grid performs perfectly well when all rows are visible, but as soon as you hit the button to toggle some row's visible property, the performance while scrolling drops significantly. All I've done here is make it so that all odd rows set their visible property to false when the button is toggled.

    Please note that I am not going to limit the grid to a smaller height, or reduce the number of rows visible at a time in order to improve performance. We are also already using a custom cell factory, which does not help with performance in this regard.

    I have found an alternate solution to achieve what I want, where I manipulate the collection view to add or remove what I want, which is working, but it seems to be counter-productive. Setting the visible property to true or false seems to be the more correct solution here, but results in an unusable performance drop, especially when combined with other more advanced grid features like item formatters and cell templates.

    Are there any specific reasons as to why we still process cells in rows that are not visible? Is that even what is happening here, and if not, what is causing this drop in performance?

    Thanks
  • Replied 21 April 2022, 10:43 pm EST

    Hello,

    No, the rows do not get rendered or run through the rendering cycle when they are set to visible false i.e. when they are hidden. Also, on investigating the shared sample, there isn't any noticeable scrolling performance decrease at our end. You can verify that from the gif attached below.

    FlexGrid_scroll_performance.zip

    Regards
  • Replied 25 April 2022, 11:22 am EST

    There absolutely is a slow down in performance when using the scroll wheel on a mouse, and even in your video I can see the grid hitching as you start to drag the scroll bar down. You can notice this much more easily through profiling via the chrome dev tools performance tab, which I have included a screenshot of below.

    In the screenshot you can see that before any rows were hidden (red, on the left) the performance tab registers each 'scroll' event at roughly 51ms (this is inflated a little because the performance checks slow down the process somewhat, but this slowdown is consistent). Then, I toggle some rows to hidden (in green, middle), and you can see a drastic increase in each 'scroll' event (red, on the right), where the average scroll event jumps to 160ms average. Note that you can view these individual scroll events easier by using the scroll wheel to scroll the page one 'tick' at a time.



    Note that this was done using latest chrome in incognito mode, so no extensions could be causing any sort of slow down that you would not also notice.

    I have also attached a video of me scrolling the grid via the scroll wheel. Note that it is much harder to 'see' the effect, if you are not the one actually using the scroll wheel, but in the second half of the video I scroll the grid at a uniform speed with no hidden rows, and then at the same speed with hidden rows on, and you can see it slowing down.

    Can you please attempt to use the performance tab as well to verify this issue. Please try using the scroll wheel of your mouse to move the grid, then try the same with the rows hidden?

    video.zip
  • Replied 26 April 2022, 5:23 pm EST

    Hi Taran,

    Thank you for the detailed explanation. We are able to observe the delay using the profiler too and hence I've escalated this case to the concerned team for further investigation of the issue(WJM-23060).
    I'll keep updating this thread with updates regarding the same.

    Regards
    Sharad
  • Replied 15 May 2022, 3:16 pm EST

    Hi Sharad, just following up to see if any updates have come through on this.
  • Replied 17 May 2022, 3:14 pm EST

    Hi Taran,

    This is still with the dev team, I've asked the team for an update, and will let you know as soon as I hear back from the devs.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels