EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: sectioni on August 10, 2017, 03:31:50 AM



Title: Datagrid performance
Post by: sectioni on August 10, 2017, 03:31:50 AM
Hi,

I have disabled the following in my datagrid:
            nowrap             : false,
            fit                : false,
            fitColumns         : false,
            autoRowHeight      : false

My columns all have a width defined, and I am loading 700 rows.

Performance analysis shows that rendering is responsible for 5.6 seconds lag.

getClientRects => $.fn._outerWidth => getCellWidth => .each => autoSizeColumn is responsible for most of it.
What is the reason this function is running?

Thank you.


Title: Re: Datagrid performance
Post by: jarry on August 11, 2017, 12:07:16 AM
Please look at this example https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material&dir=ltr&pitem=Large%20Data&sort=

It loads 1000 rows at a time quickly.


Title: Re: Datagrid performance
Post by: sectioni on August 16, 2017, 07:37:49 AM
Hi,

I managed to find the reason!

If i set my columns programmatically, and I have a column that's hidden, and it's width is set to 0 or no width parameter at all, then rendering is 3-4 times slower on Chrome, and about 1.5 slower on Firefox

You can test it here: https://jsfiddle.net/xwyq3ehd/14/

Run the script, Click Load, Watch the time.
Then change the width value on the first column to any number, Run the script, Click Load and watch the time again.


Title: Re: Datagrid performance
Post by: juancitop on August 16, 2017, 09:22:04 AM
The same happens defining the grid in html markups.


Title: Re: Datagrid performance
Post by: jarry on August 16, 2017, 07:30:21 PM
When loading large dataset, you should set 'width' property for each columns to get more loading performance.