Kendo grid create performance bottleneck (jerky screen) on Chrome with large dataset

9 posts, 0 answers
  1. Mamun
    Mamun avatar
    4 posts
    Member since:
    Oct 2017

    Posted 07 Oct 2017 Link to this post

    I'm trying to load a large dataset (~2000 rows) on kendo ui grid - jquery. But it's creating a performance bottleneck and very jerky screen on Google chrome (performance profiling says: Forced reflow is a likely performance bottleneck). But same code/ui runs flowlessly on firefox. I've added a sample dojo.

    dojo: http://dojo.telerik.com/eleNEQ/3

    In this dojo please hover on the animated button after dataload.

    Test criteria:
    Google chrome: Version 61.0.3163.100 (Official Build) (64-bit)
    Firefox: 56.0 (32-bit)

    I'm wondering whether this issue can be solved by telerik. Thanks in advance.

  2. Mamun
    Mamun avatar
    4 posts
    Member since:
    Oct 2017

    Posted 07 Oct 2017 in reply to Mamun Link to this post

    Addition:

    Without the css files..
    meaning disabling css recalculation after dataload, runs fine on both chrome&firefox.
    dojo without css: http://dojo.telerik.com/eleNEQ/4

  3. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 10 Oct 2017 Link to this post

    Hello, Mamun,

    Thank you for the report and the example.

    After testing it on my end, I noticed that the biggest delay is coming from the request.

    If the same data is set locally the Grid is rendered almost instantly:

    http://dojo.telerik.com/eleNEQ/7

    I can agree that the Grid is slower with the CSS styles then without them, but the delay should not be significant on most browsers and it is needed in order to display the Grid containers and elements correctly.

    Still, I forward this to the developers' team, for tests to check if we can make additional improvements to the Grid rendering.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Mamun
    Mamun avatar
    4 posts
    Member since:
    Oct 2017

    Posted 11 Oct 2017 in reply to Stefan Link to this post

    Hi Stefan,

    Thanks for your reply. But I don't think it's because of the response time. Because I produced large amount (~3000) of data within 1.5sec. It's still the same result: on chrome very jerky and buggy. I checked your SASS theme default v2, slightly better, but still jerky. If I completely remove the css - no issue at all. As the data gets larger (~3000 or more) browser becomes more unusable. I've added new test with 3000 rows :

    1. without css: http://dojo.telerik.com/eleNEQ/11
    2. without SASS theme default v2 (2017.3.913): http://dojo.telerik.com/eleNEQ/10
    3. without LESS (2017.3.913): http://dojo.telerik.com/eleNEQ/12

    No 1 only performs ok on chrome. But 2/3 is totally not usable even if the response is generated within (~2s). I even tested with "internet explorer 11", same jerky screen and column filter opens up like 3s later.
    But all the test cases are ok firefox. Please don't say: then use the firefox... 😜😜
    I hope this issue can be solved in the next build. Thanks in advance.

     

     

  5. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 13 Oct 2017 Link to this post

    Hello, Mamun,

    Thank you for the examples.

    Still, after inspecting it the bigger delay is coming from the request. More than 9 seconds are needed, just for the response:



    I made an example with not 3000 but 6000 data items which is rendered almost instantly on my end:

    http://dojo.telerik.com/iherA

    We do agree that the CSS is making the application slower than without CSS, but the difference is not noticeable.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Mamun
    Mamun avatar
    4 posts
    Member since:
    Oct 2017

    Posted 13 Oct 2017 in reply to Stefan Link to this post

    Hello Stefan,

    Thanks for your example as well. I've added that animated button on top of your example. Results are still same to me.
    The animation is very buggy. Also the add new record opens up like 3/4 second later.
    Updated Link: http://dojo.telerik.com/iherA/2
    Anyway, thanks for all your effort. Hope to see some improvement on this.

  7. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 17 Oct 2017 Link to this post

    Hello, Mamun,

    Thank you for the suggestion and the recommendations.

    I can assume that the machine is also making a difference, as the same example is loading for around 2000ms on my end.

    We constantly try to improve our widgets in terms of performance and functionalities.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Rob
    Rob avatar
    1 posts
    Member since:
    Nov 2017

    Posted 11 Jan 2018 Link to this post

    We're experiencing the same issue with only 800-1000 rows, 9 columns per row.  After the load, the page continues to be hesitant in responding to clicks or hover actions.

    In Mamun's dojo above, the data indeed loads relatively quickly, but you'll notice that any mouse actions after load take considerable time to respond.  Try it.  After the grid loads, click on the drop down at the bottom.

    There is something definitely eating up CPU and not letting it go in the kendo ui grid.  We're still using version 1.6.0.

    Is there any kind of option we can turn off/on to reduce the number of event listeners being generated?

  9. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 15 Jan 2018 Link to this post

    Hello, Rob,

    When working with large datasets we recommend using paging, virtual scrolling or endless scrolling in order to reduce the number of DOM elements rendered on the page:

    Paging:

    https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-pageSize

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/pageable

    Virtual scrolling:

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#virtual-scrolling

    https://demos.telerik.com/kendo-ui/grid/virtualization-local-data

    Endless scrolling:

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#endless-scrolling

    https://demos.telerik.com/kendo-ui/grid/endless-scrolling-local

    I hope one of the approaches to be helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top