JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › DropDownList › DropDownList takes long time to initialize
Tagged: dropdownlist, dropdownlist web component
- This topic has 6 replies, 2 voices, and was last updated 4 years, 1 month ago by
admin.
-
AuthorPosts
-
July 13, 2020 at 6:57 am #100902
Tr12
MemberHi, 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 youJuly 13, 2020 at 7:27 am #100904Tr12
MemberI 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));
July 13, 2020 at 8:27 am #100905admin
KeymasterHi,
– 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/July 13, 2020 at 11:12 am #100907Tr12
MemberHi 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 youJuly 13, 2020 at 11:51 am #100908admin
KeymasterHow did you use the Input?
Best Regards,
Peter
Smart UI Team
https://www.htmlelements.com/July 14, 2020 at 12:41 pm #100919Tr12
MemberHi 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):
July 14, 2020 at 3:18 pm #100921admin
KeymasterHi,
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/ -
AuthorPosts
- You must be logged in to reply to this topic.