Is Webix Slow?

Hi,
I am evaluating Webix and that is why I have downloaded the pro version. At the same time, I am evaluating some other competitor framework. What I am doing is to parse a text file into a datatable. The data file has around 2,000 records with a total size of 1.6 MB (17 columns). The data is in JSON format. The datatable will load the data from a web service running on my local machine (So, not directly as a file). Here is my feedback:

  1. To display the results, Webix needs 6s while the other framework needs only 2.5s
  2. It gets even worse if I include the following function in Webix (my goal is to manipulate one column on the fly):
onAfterLoad: function () {
                        /* dtable.eachRow(
                            function (row) {
                                dtable.getItem(row).engineId = dtable.getItem(row).engineId
                                    .substring(20);
                            }
                        )
                        dtable.refresh(); */
                    }

I have a similar code in the other framework and the increase is negligible.
3) I have enable subrow in my datatable to display a few additional text:
subrow: "< div style='text-align: left;'>< ul>< li>Motor ID: #motorId#</li>< li>Request: #request#</li>< li>User Location: #location#</li></ul></div>",

and when I click on the plus sign to expand the row, I need to wait maybe like 0.5 - 1 s to get that detail row opened. In the other framework, it is instantaneous.

Am I doing something wrong? I am just following the basics and there is nothing complicated in my code.

Thanks

Please check the next snippet - https://webix.com/snippet/4437dbd6
It shows the same amount of data and rendering time is about 40ms

What can cause huge rendering time in your case:

  • time for loading data from server side can differ based on server side latency
  • using extra options ( such as adjust:true ) for the datatable
  • using autoheight for the datatable which results in rendering the whole table and not the visible cells only

You are right… It was because of “autoheight” & “autowidth”. Once I removed these two, the problem was gone. Thanks for the advice.

Note: Server latency cannot be related here as I mentioned that I am using the same server for testing both libraries. So, it is an apple-to-apple case. But now we know the reason.

Thanks

Why is moving the cursor in a table so slow with autoheight: true?

https://snippet.webix.com/muw9nzhy

And what is the workaround if you do need the table to take up all the available height in the container?

autoheight:true makes table take up not the available height in the container, but the maximum possible height.
in this case rendering method is different, and on each render all rows are recalculated.
autoheight:true is better for small amount of data.
if you need to fill all available space in the container, just don’t use autoheight, or set it to false.

I’m trying to set the table height in this sample to the maximum possible height:

https://snippet.webix.com/7qpxlw0t

autoheight: true does that, but the table is very slow. Recalculating all rows on each render seems wasteful because nothing has changed about the table data or dimensions while the user was navigating through it.

If I don’t use autoheight, the table collapses, apparently to the height of the form to the right of the resizer.

Seems like the problem is with the multiview.

your problem is related to the form next to the table.
it has implicit autoheight, as its all children have implicit autoheight.
you need to add a view with implicit or explicit fullheight, like space or template.
https://snippet.webix.com/qyg8eo3r