Performance issue when populating a large number of items
Closed this issue · 2 comments
We have a use case of populating 4,000+ items. This is currently extremely slow in Flounder (opening the dropdown takes 1 full second).
I'm guessing that not all items have to be rendered at once, or that some kind of "show more" functionality could be built in?
Wanted: from 🐢 to 🐇 🐎 🏎️ 🚅 🛩️ 🥇
@conor-cafferkey-sociomantic Just to give some insights on this, the fact that we pre-render all the items as live DOM elements and then add/remove hidden class to toggle display : none, causing a repaint on the entire list of DOM elements (even though we just add/remove class from the parent, a repaint will happen for the entire list of children), is the real performance bottleneck. AFAIK, the only solution to this issue would be to render items in chunks and do on demand chunked rendering (example when scrolling inside the flounder list), or to achieve this by somehow having a css setup that doesn't cause a forced reflow. Below are the sample from the profiling and a demo to indicate the same sluggishness while removing the hidden class using the developer tools.
There is no single bottleneck causing the performance issue above so I’ve created a Performance milestone with specific issues to tackle this and other performance issues with large datasets.