Estoy implementando una lista de elementos de la interfaz de usuario. Admite la ordenación por funciones de clasificación y la ordenación personalizada de arrastrar y soltar.
Se utilizará para mostrar cientos de artículos.
Estoy buscando la "mejor" manera de implementar el pedido.
La clasificación siempre se realiza en el modelo de datos en la memoria y luego se proyecta en la interfaz de usuario.
La primera solución que conozco es simplemente reordenar los elementos DOM. Simple, pero se siente como demasiado pesado en recursos...
...en comparación con flexbox y css order. Esa es la segunda solución que tengo en mente. Asigne orden con valores crecientes y deje que css haga su magia... esperemos que use menos recursos.
El problema con el orden css es que si elimino o agrego elementos de la lista, no se reindexa (el valor del pedido) automáticamente, por lo que hay más mantenimiento para mantener el sistema en funcionamiento en lugar de usar el orden de elementos DOM.
¿Ves alguna (des)ventaja con el uso de cualquiera de esos? ¿Está de acuerdo en que usar CSS order es (significativamente) más rápido/menos costoso? ¿Alguna otra opción para pedir elementos?
Editar: la paginación no es una opción. Mi pregunta es solo sobre los mecanismos para reordenar elementos.
Creo que si usa una lógica de paginación con Javascript, puede reducir la representación de cientos de elementos. Quiero decir que puede dividir elementos y luego solo renderizar 10 elementos y los siguientes 10 elementos.
No estoy seguro de que esta lógica ayude o no. https://jasonwatmore.com/post/2018/08/07/javascript-pure-pagination-logic-in-vanilla-js-typescript
Cuando un usuario cambia el orden de los elementos (moviendo un elemento o alternando una función de clasificación), debería actualizar la matriz en la memoria, lo que debería desencadenar una nueva representación de los elementos DOM. Los marcos JS front-end modernos hacen un buen trabajo al actualizar solo los elementos DOM necesarios (usando un virtual-dom).
Además, tener una única fuente de verdad le permitirá expandir fácilmente la funcionalidad sin incurrir en demasiada deuda técnica. Por ejemplo, si decide agregar métodos de paginación o CRUD.
Muy bien, hice algunas pruebas en https://jsbench.me/2pkzlbj45h .
Ordenar elementos usando CSS order puede ser desde un 20% más lento hasta un 40% más rápido que ordenar mediante dom manipulation , dependiendo de si el orden de inicio es completamente aleatorio o casi ordenado (0,5% de elementos desordenados).
Cuanto más aleatorio sea el orden de inicio, más se beneficia CSS order .