javascript - 如何对触发最少回流的 DOM 元素进行排序？

Question

我有下面的例子。

<div class="parent">
  <div data-id="5"></div>
  <div data-id="2"></div>
  <div data-id="3"></div>
  <div data-id="1"></div>
  <div data-id="4"></div>
</div>

如果我想按升序 (1,2,3,4,5) 对这些 div 进行排序。我通常会做一个循环并将 div 附加到 parent div。然而，这将意味着我总是对 dom 进行 5 次更改(无论 div 的顺序如何)，每个 div 一次。

但是您可以使用 .insertBefore()仅需 2 处更改 即可正确排序 div 的方法!

5,2,3,1,4
Insert 1 before 2
5,1,2,3,4
Insert 5 behind 4 (using .insertBefore() and .nextSibling)
1,2,3,4,5 

问题 1 通过仅对 DOM 进行 2 次更改，我假设回流发生较少，从而使“2 次更改”排序操作比“5 次更改”排序操作更快。这是正确的吗？

问题 2 什么样的方法/算法能够找出只插入 1 before 2 和 5 behind 4 ？

问题 3(奖励) 随着项目数量的增加，这种“优化”算法是否仍然更快？范围 10 - 100 - 1.000 - 10.000 - 100.000

也许要澄清一下:我不是在寻找一种方法来以最佳方式计算顺序 (1,2,3,4,5)。在某个时候我知道顺序，但我想将顺序与 div 的顺序进行比较，然后计算出最少的操作。

Answer 1

对浏览器的功能更有信心。

1. 当 DOM 操作在 JavaScript 序列的单个同步执行中执行时，浏览器会将它们批处理在一起。当您通过访问要求 DOM 是最新的 DOM 属性/方法(例如， innerWidth、offsetTop 或 getBoundingClientRect。参见 Rendering: Repaint, Reflow, Restyle了解详情。
   删除 DOM 节点不是必需的。将它们添加到新创建的 DocumentFragment ，它们将自动从 DOM 中的当前位置移除。

2. 浏览器，更具体地说是 JS 引擎，已经知道并使用最智能的排序算法。除了非常特殊的情况，您不需要了解排序操作的内部机制。只需使用 Array.prototype.sort ，如有必要，提供自定义函数，并观察奇迹的发生。