在div上对div进行排序的最佳方式（最快）是什么？ （在没有JQuery的javascript中）

Question

我有以下内容：

<div id='a'>
   <div id='a1' />
   <div id='a2' />
   <div id='a3' />
   <div id='a4' />
   <div id='a5' />
</div>

假设当按下按钮时我需要重新排列它：

<div id='a'>
   <div id='a2' />
   <div id='a4' />
   <div id='a3' />
   <div id='a1' />
   <div id='a5' />
</div>

或类似的东西。

现在， 我知道如何让所有的孩子都来自div。 我知道如何对它们进行排序（无论我的算法是什么）

那么问题是重新排列它们的最佳方法是什么？

我可以将它们全部删除。 然后按正确的顺序逐个读取它们。

那是有效的，但我认为每次添加新项目时都会有重新流程，这是错误的吗？

任何人都可以帮忙吗？ 请指出网上的文章或写下解决方案

感谢

Answer 1

所以你有一个排序数组，你可以做两件事 [Performance Test]

var array = [ ... ]; // sorted array of elements
var len = array.length;

1. 在附加元素之前分离父，然后追溯父级。 这似乎是最快替代方案（特别是对于大型集合）。

   var parent = root.parentNode;
   var next   = root.nextSibling;
   parent.removeChild(root);
   for (var i = 0; i < len; i++) {
     root.appendChild(array[i]);
   }
   parent.insertBefore(root, next);
   

2. 另一种选择是使用 documentFragment ，然后立即将其附加到DOM。

   var fragment = document.createDocumentFragment();
   for (var i = 0; i < len; i++) {
       fragment.appendChild(array[i]); // lighweight, off-DOM container
   }
   root.appendChild(fragment); // append to the DOM at once
   

   不幸的是，它会降低Chrome中的代码速度。 （在IE和FF中更快）

我想指出，除非你处理1000多个元素，否则差异不会明显。

Answer 2

使用insertBefore / appendChild DOM方法重新排序。

最好使用jQuery或其他javascript框架，这样你就不必自己完成所有的脏工作。