重新排序 HTML 元素 - 最有效与实用的方式答案

【问题标题】：Reorder HTML elements - most efficient vs practical way重新排序 HTML 元素 - 最有效与实用的方式
【发布时间】：2022-02-20 05:19:15
【问题描述】：

我正在实现一个项目的 UI 列表。支持排序功能排序和自定义拖放排序。

它将用于显示数百个项目。

我正在寻找实现排序的“最佳”方式。

排序总是在内存中的数据模型上完成，然后投射到 UI 上。

我知道的第一个解决方案就是重新排序 DOM 元素。很简单，但是感觉资源有点太重了……

...与 flexbox 和 css 顺序相比。这是我想到的第二个解决方案。分配具有递增值的顺序，让 css 发挥它的魔力……希望使用更少的资源。

css 顺序的问题在于，如果我删除或添加列表项，它不会自动重新索引（顺序值），因此与使用 DOM 元素顺序相比，需要更多维护来保持系统正常工作。

您是否看到使用其中任何一种的任何（不利）优势？您是否同意使用 css 订单（显着）更快/更便宜？订购元素还有其他选择吗？

编辑：分页不是一种选择。我的问题只是关于重新排序元素的机制。

【问题讨论】：

CSS 的一大缺点，你自己已经意识到了：你将拥有两层信息，而不是只有一层信息（DOM 元素的原始顺序，以及通过 CSS 重新排序），这使一切变得复杂并且容易出错。
基于 css 的重新排序是一个有趣的想法。我倾向于使用 javascript 重新排序 DOM 元素。这就是我的第一个想法。您可以花哨并使其仅重新渲染已更改的内容，类似于现代框架所做的。如果您担心这么多项目的性能，您还可以更改您的设计并添加分页之类的内容。
我认为您绝对不应该使用 CSS 顺序，它只会影响视觉顺序，并且会使您的列表变成无法访问的现场演示。
@Noam 谢谢，我知道这一点。在我的情况下，它并不是一个真正的问题，因为它是一个相当复杂的应用程序，如果你需要这种辅助功能，你就不会使用它。
因为我不知道细节，所以不能真正争论，但考虑到即使是仅仅依赖键盘导航的人也会得到一团糟的体验。至于效率，我觉得如果 DOM 操作做得合理的话，应该不会有太大的区别。谁说 CSS（错误）顺序更有效？不过我没有经过测试的数据。

【解决方案1】：

我认为如果你使用 Javascript 的分页逻辑，你可以减少数百个项目的渲染。我的意思是您可以拆分项目，然后只渲染 10 个项目和接下来的 10 个项目。

【讨论】：

【解决方案2】：

当用户更改元素的顺序（通过移动元素或切换排序功能）时，它应该更新内存中的数组，这应该会触发 DOM 元素的重新渲染。现代前端 JS 框架在仅更新必要的 DOM 元素（使用虚拟 dom）方面做得很好。

此外，拥有单一事实来源可以让您轻松扩展功能，而不会产生过多的技术债务。例如，如果您决定添加分页或 CRUD 方法。

【讨论】：

【解决方案3】：

好的，在https://jsbench.me/2pkzlbj45h做了一些测试。

使用CSS order 排序元素可能比使用dom manipulation 排序慢20% 到快40%，具体取决于起始顺序是完全随机还是几乎已排序（0.5% 的元素乱序）。

起始顺序越随机，受益越多CSS order。

【讨论】：