重新排序 HTML 个元素 - 最有效与最实用的方法
Reorder HTML elements - most efficient vs practical way
我正在实施一个 UI 项目列表。它支持按排序功能排序和自定义拖放排序。
它将用于显示数百个项目。
我正在寻找实现排序的“最佳”方式。
排序总是在内存中的数据模型上完成，然后投影到 UI。
我知道的第一个解决方案是重新排序 DOM 元素。简单，但感觉有点太费资源了...
...与 flexbox 和 css 顺序相比。这是我想到的第二个解决方案。以增加的值分配订单并让 css 发挥其魔力...希望使用更少的资源。
css 订单的问题是，如果我删除或添加列表项，它不会自动重新索引（订单值），因此需要更多维护来保持系统正常工作，而不是使用 DOM元素顺序。
您是否看到使用其中任何一个的任何（不利）优势？
您是否同意使用 css 订单（显着）faster/less 昂贵？
还有其他订购元素的选项吗？
编辑：
分页不是一种选择。我的问题只是关于重新排序元素的机制。
我想如果你使用 Javascript 的分页逻辑，你可以减少数百个项目的呈现。我的意思是您可以拆分项目，然后只渲染 10 个项目和接下来的 10 个项目。
我不确定这个逻辑是否有帮助。
https://jasonwatmore.com/post/2018/08/07/javascript-pure-pagination-logic-in-vanilla-js-typescript
当用户更改元素的顺序（通过移动元素或切换排序功能）时，它应该更新内存中的数组，这应该触发 re-rendering 的 DOM元素。现代 front-end JS 框架在仅更新必要的 DOM 元素方面做得很好（使用 virtual-dom）。
此外，拥有单一事实来源将使您能够轻松扩展功能，而不会招致太多技术债务。例如，如果您决定添加分页或 CRUD 方法。
好的，在 https://jsbench.me/2pkzlbj45h 做了一些测试。
使用 CSS order 对元素排序比 dom manipulation 排序慢 20% 到快 40% 取决于起始顺序是完全随机的还是几乎排序的（0.5% 的元素乱序）。
起始顺序越随机，受益越多CSS order。
我正在实施一个 UI 项目列表。它支持按排序功能排序和自定义拖放排序。
它将用于显示数百个项目。
我正在寻找实现排序的“最佳”方式。
排序总是在内存中的数据模型上完成，然后投影到 UI。
我知道的第一个解决方案是重新排序 DOM 元素。简单，但感觉有点太费资源了...
...与 flexbox 和 css 顺序相比。这是我想到的第二个解决方案。以增加的值分配订单并让 css 发挥其魔力...希望使用更少的资源。
css 订单的问题是，如果我删除或添加列表项，它不会自动重新索引（订单值），因此需要更多维护来保持系统正常工作，而不是使用 DOM元素顺序。
您是否看到使用其中任何一个的任何（不利）优势？ 您是否同意使用 css 订单（显着）faster/less 昂贵？ 还有其他订购元素的选项吗？
编辑： 分页不是一种选择。我的问题只是关于重新排序元素的机制。
我想如果你使用 Javascript 的分页逻辑，你可以减少数百个项目的呈现。我的意思是您可以拆分项目，然后只渲染 10 个项目和接下来的 10 个项目。
我不确定这个逻辑是否有帮助。 https://jasonwatmore.com/post/2018/08/07/javascript-pure-pagination-logic-in-vanilla-js-typescript
当用户更改元素的顺序（通过移动元素或切换排序功能）时，它应该更新内存中的数组，这应该触发 re-rendering 的 DOM元素。现代 front-end JS 框架在仅更新必要的 DOM 元素方面做得很好（使用 virtual-dom）。
此外，拥有单一事实来源将使您能够轻松扩展功能，而不会招致太多技术债务。例如，如果您决定添加分页或 CRUD 方法。
好的，在 https://jsbench.me/2pkzlbj45h 做了一些测试。
使用 CSS order 对元素排序比 dom manipulation 排序慢 20% 到快 40% 取决于起始顺序是完全随机的还是几乎排序的（0.5% 的元素乱序）。
起始顺序越随机，受益越多CSS order。