DropDownList takes long time to initialize

[Tr12]

Hi, after replacing jqxDropDownList with the smart-drop-down-list, I noticed it takes a long time to initialize, to for relatively few elements. This was not the case with the older jQWidgets (jqxDropDownList).
For example, creating a smart-drop-down-list with 120 list items takes about 600-800 ms for me in Chrome and Firefox. I’m using the following code:

window.onload = () => {
let perfStart = performance.now();
let dropDown = new window.Smart.DropDownList();
// Create 120 items
for (let i = 0; i < 120; i++) {
let item = new window.Smart.ListItem();
item.label = "Item " + i;
dropDown.appendChild(item);
}
document.body.appendChild(dropDown);
let time = performance.now() - perfStart;
alert("Time: " + Math.floor(time));

However, we thought that the Smart UI widgets would have a better performance than jQWidgets as they are using newer web technologies. Is there any way to improve the performance?
If not, I think we cannot use the smart-drop-down-list and will hae to use a regular HTML “select” element instead, and try to style it to look similar to the other smart widgets, because 600 ms creates a noticable lag.
Thank you

[Tr12]

I tried to set dropDown.dataSource to an array of objects rather than creating new smart-list-items. This improves performance a bit (it only needs about 300 ms), but it’s still relatively slow.

let perfStart = performance.now();
let dropDown = new window.Smart.DropDownList();
let datas = [];
for (let i = 0; i < 120; i++)
datas.push({
label: "Item " + i,
value: i
});
dropDown.dataSource = datas;
document.body.appendChild(dropDown);
let time = performance.now() - perfStart;
alert("Time: " + Math.floor(time));

[admin]

Hi,
– It is slow approach to do document.body.appendChild multiple times. The correct approach is to create a document fragment, append all items to it and then append the document fragment.
– The second approach with setting dataSource is better one. However, you should set the “virtualized” property to true, if you plan to use this component with many items. If all items will be with equal height, you can speed up the things by setting the “itemHeight” property, too. By doing that, height layout calculations will not be performed by the UI Component.
Best Regards,
Peter
Smart UI Team
https://www.htmlelements.com/

[Tr12]

Hi Peter,
thank you for your help!
By setting virtualized=true and setting itemHeight to a fixed value (e.g. 25), the performance is now better, it needs about 50-60 ms to create instead of 300 ms. Still, when I have multiple drop down lists, the delay is noticeable, e.g. when I have 4 smart-drop-down-lists to be shown on the page/window, they still need about 200-250 ms to create. This is still slower than using the jqxDropDownList widget.
I also tried to use a smart-input with setting readonly=true and dropDownButtonPosition=’right’, and using a datasource to show items like in the drop-down-list, which seems to be much faster than the smart-drop-down-list (only needs about 10 ms).
However, with smart-input I cannot set a different value for each item – the smart-input only seems to use the “label” property from the data source.
Thank you

[admin]

How did you use the Input?
Best Regards,
Peter
Smart UI Team
https://www.htmlelements.com/

[Tr12]

Hi Peter,
when I combine the “.virtualized = true” setting with “.dropDownAppendTo = document.body”, (because I display it in a SmartWindow), then it seems the drop down list doesn’t work correctly in Firefox 78.0.2, whereas it works in Chrome. See the following code pen: https://codepen.io/KP-Traeger12/pen/OJMoMmK
In Firefox, it will look like this (only the first item is visible):

 
 

[admin]

Hi,
Thank you for the feedback. The behavior is confirmed and we will look at it for the next scheduled release.
Best Regards,
Peter
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts