Render performance

[BennyParticipant]

We are having some performance problems with the grid. We have a grid where the page loads with the grid data in about 100 ms and then the grid takes almost 2 full seconds to initialize, which is very annoying. After some investigating, we found out that the problem lies with the way the grid is rendered.

Consider the following example http://jsfiddle.net/55twgruk/1/ a grid with 20 columns of type ‘int’ and no rows. In my browser (Chrome 41.0.2272.76) the grid initialized in 450-600ms and with “showfilterrow: false” it runs in half that time. The reason that the filter row halves the time is not because the filter row is the problem, but because it contains a lot of HTML elements. Rendering a empty grid with 20 columns should not cost 450 ms.

To demonstrate that the rendering is the problem I made the following example http://jsfiddle.net/2cha9tjs/ . Here the same grid is rendered in a hidden element, which is made visible when the grid has done it’s work. The grid with filter row finishes initializing in 20-30 ms. This is, of course, not a fair example since the rendering time is not included in the measurements. However, it shows that 95% of the grid’s initialization time is spend on adding html elements to the DOM and therefore the first place to look for performance optimizations.

Do you have any plans to optimize this part of the code, for example by using document fragments?

[Peter StoevKeymaster]

Hi Benny,

It should be expected that when you turn on Filter row the performance will be affected because Widgets for all columns should be created. In your case – 20 DropDownLists with 20 ListBoxes, 100 Buttons and 40 ScrollBars. For example, if you change the filtertype to textbox or just remove it, things are different: http://jsfiddle.net/jqwidgets/j8ot5ysx/. We do not find it necessary to make any changes in the Grid in terms of performance. If the performance with filter row is not good enough for your app, then use the default filtering mode. That’s why we have hundreds of features. It’s your personal decision what to turn on and turn off or which feature will be used. For filtering, we have several options, for paging, too, for editing again and almost for everything the Grid has several options.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[BennyParticipant]

I use the filter row as an example, it is not the underlying problem. I only use it as an example because it contains a lot of HTML elements and therefore has a larger impact.

The grid I am developing takes 1,5 seconds to start up without data. It is not acceptable to spend 95% of that time adding a few 100 elements tot he DOM. I can strip away the filter row and limit the number of columns, but this only limits the problem instead of solve it. And besides, we want all those features because they are great.

In my first example, taking away the filter row, still leaves a loading time of 200 ms for a very simple grid with no data. It is not reasonable to take 200 ms for that amount of work. With the hack I used in the second example, the gird becomes a lot more responsive, which shows that there is room for improvement. We are talking here about just a few hundred miliseconds, but in my actual grid we are talking about whole seconds at which point this is a significant issue.

[BennyParticipant]

To illustrate that adding and modifying elements to the DOM is considered bad practive I made the following example http://jsfiddle.net/cuhsq7dz/2/ where I used detach() to make sure the grid is only rendered once. The classic grid completes in 441 ms for the detached grid and 95 ms for the detached grid. After the scripts are done the browser needs time to render the last changes, which in case of the detached grid are significant. Not only do I save time by rendering everything once, my page becomes more responsive much quicker since the page rendering happens asynchronously in a different thread.

Again, the times in these examples are much smaller than my actual grid. We will either go with one of these hacks or choose another library to provide a better service.

Here are some more sources that show that your approach is not considered good practice:
http://ejohn.org/blog/dom-documentfragments/
http://learn.jquery.com/performance/detach-elements-before-work-with-them/
http://learn.jquery.com/performance/append-outside-loop/

[Peter StoevKeymaster]

Hi Benny,

I already wrote you about the Filter row. If you don’t like how it performs, use the Filter Menu instead. We consider that our approach is good enough and we are well aware how to add html elements to the DOM. If you think otherwise, that’s ok. You can follow your own logic when you build your own Grid or look for other.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[BennyParticipant]

We think that the jqx grid is a great product. Once it is initialized it performs very well, even with a few thousand rows of data (with paging). For a single page application the initialization time would not be as much of a problem, unfortunately we are not there yet. Since the initialization time is worse than our old component, this has become a critical problem for us.

It looks like the performance hack in the examples doesn’t really work. The rendering isn’t done while hidden, it’s just postponed in the code. As you said in http://www.jqwidgets.com/community/topic/making-grid-inside-hidden-container/ “You can’t and shouldn’t create a Grid from hidden container”. This makes sense, however we try to do it intentionally. We would like the grid to be rendered while detached or in a document fragment while the jqx.isHidden() function still returns false. But it does not look like there is an override for that, unless you have any suggestions?

[BennyParticipant]

We decided to go with the solution below, which reduced initialization time by 30% for us. Temporarily replacing the isHidden function is not great, but small and effective enough to be acceptable for us. Hopefully this performance hack will help other developers building a page where the grid is the primary component of the page.

REMOVED CODE ( EULA VIOLATION )!

[letos07Participant]

Benny can you share your solution? It was be very helpful to me and my project, thanks!

[defyentParticipant]

I’ve also run into a very similar issue, how was this addressed?

[Author]

Posts