I am implementing an UI list of items. It supports ordering by sort functions and custom drag and drop ordering.
It will be used for displaying hundreds of items.
I am looking for the "best" way to implement the ordering.
Sorting is always done on data model in memory and is then projected onto the UI.
First solution I know about is just reorder the DOM elements. Simple, but it feels like a little too resource heavy...
...in comparison with flexbox and css order. That is the second solution I have in mind. Assign order with increasing values and let css do its magic... hopefully with less resources used.
The problem with css order is that if I remove or add list items, it does not reindex (the order value) automatically, so there is more maintenance to keep the system working as opposed to using DOM element order.
Do you see any (dis)advantages with using either of those? Do you agree that using css order is (significantly) faster/less expensive? Any other options to order elements?
Edit: Pagination is not an option. My question is only concerning the mechanisms to reorder elements.
Alright, did some test at https://jsbench.me/2pkzlbj45h.
Ordering elements using CSS order can be from 20% slower to 40% faster than ordering by dom manipulation depending on whether the starting order is fully random or almost sorted (0,5% of elements out of order).
The more random the starting order is, the more it benefits CSS order.