如何对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添加到parentdiv中.然而,这意味着我总是对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的顺序,然后THEN计算出最少的操作量.

Answer 1

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

1. 当浏览器在一个单一的同步执行JavaScript序列中执行时,浏览器将DOM操作批处理在一起.异常发生时显式地(有时是未知的)请求的回流通过访问所需要的DOM DOM属性/方法是先进的日期,例如innerWidth,offsetTop,或getBoundingClientRect.有关详细信息,请参见渲染:重绘,重排,重新设计.
   删除DOM节点不是必需的.将它们添加到新创建的中DocumentFragment,它们将自动从DOM中的当前位置移除.

2. 浏览器,更具体地说是JS引擎,已经知道并使用最智能的排序算法.除特定情况外,您无需了解排序操作的内部机制.只需使用Array.prototype.sort,必要时提供自定义功能,并观察魔法发生.