As a stress test I created an un-optimised example of elm-select where I rendered 1000 menu items.
Anticipating there would be some performance hit, I quickly opened the performance tab in chromium and saw that an awfully large amount of time was being spent on recalculating css styles. This tends to create a bit of latency for when an item is hovered and its hover styles are applied.
The main culprit here is css style recalculation of the menu items. You see… each menu item has an identical css class, so the browser needs to check every single one of them to resolve the final css styles. A lot of wasted effort if you ask me!
The addition of lazyNode in elm-css addressed this issue directly and ensured all children received a unique css class which removes a whole bunch of unnecessary work the browser needs to do. This resulted in a far snappier style change experience and significantly less work calculating styles.
These changes are reflected in the latest and greatest elm-select.
Massive props to the folks that implemented this change, pretty amazing performance boost!
CM