This is a migrated thread and some comments may be shown as answers.

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

8 Answers 668 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mamun
Top achievements
Rank 1
Mamun asked on 08 Oct 2017, 04:48 AM

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.

8 Answers, 1 is accepted

Sort by
0
Mamun
Top achievements
Rank 1
answered on 08 Oct 2017, 04:55 AM

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

0
Stefan
Telerik team
answered on 10 Oct 2017, 12:28 PM
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.
0
Mamun
Top achievements
Rank 1
answered on 11 Oct 2017, 11:09 AM

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.

 

 

0
Stefan
Telerik team
answered on 13 Oct 2017, 06:05 AM
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.
0
Mamun
Top achievements
Rank 1
answered on 13 Oct 2017, 09:22 AM

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.

0
Stefan
Telerik team
answered on 17 Oct 2017, 06:07 AM
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.
0
Rob
Top achievements
Rank 1
answered on 11 Jan 2018, 07:14 PM

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?

0
Stefan
Telerik team
answered on 15 Jan 2018, 01:28 PM
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.
Tags
Grid
Asked by
Mamun
Top achievements
Rank 1
Answers by
Mamun
Top achievements
Rank 1
Stefan
Telerik team
Rob
Top achievements
Rank 1
Share this question
or