Javascript 通过附加dom元素避免zIndex

所以我试图通过z索引控制大小相等的元素的堆叠。 现在，我最近遇到了一个想法，希望通过避免浏览器回流来避免通过z索引和提高性能时间，而是通过我将内容附加到父级的顺序来排列层

因此，如果我有一个容器div，其中包含所有堆叠div，并且有一个链表反映顺序，引用堆叠div，那么我会根据用户输入对div重新排序。然后，我将重新创建div元素并按顺序追加所有内容，而不是更新z索引。比如说：

var from = nodeBeforeFrom; // Input
var target = nodeBeforeTarget; // Input
var linkedlist = input; // var linkedlist contains all the stacking divs
linkedlist.moveElement(div1, div2); //Move div1 to after div2
var container = document.createElement('div');

linkedlist.reorder; // 

var cur = linkedlist.first;
while (cur.next) {
  container.appendChild(cur)
  cur = cur.next;
}
document.removeChild(oldContainer);
document.appendChild(container);
// This is meant as pseudocode so forgive an errors in regards to the specifics

因此，我的问题如下：

这是否会将浏览器回流从n个回流减少到1或2个（其中n是div的数量）？如果我理解正确，更改单个元素的z索引应该会导致浏览器重新绘制或回流

第二种方法是否有效，并按照附加元素的顺序堆叠元素

有没有一种方法可以使用DOM的子节点结构来移动子节点，这样我就不必创建单独的链表了？我目前只能看到removeChild和appendChild函数

---

是的，性能是一个问题，因为我计划在图形和html5方面使用它。所以我想把钱存到哪里。

太好了，我似乎已经回答了我自己的问题，因为在Opera的好心人的帮助下，我做了一些事情和研究。是的，在浏览器上对隐藏/不可见的元素执行更新，然后将其添加到DOM树中会更快。我得到了他的确认。实际的技巧是设置隐藏的CSS标记，执行所有影响显示的操作，然后将hidden设置回true，从而将浏览器的回流从O（n）减少到总共2次

---

同样，这种避免z索引的方法也确实有效。不幸的是，我仍然没有找到访问DOM元素的childNodes链接列表的方法。然而，仔细看一下规范，发现DOM节点的childNodes是只读的，这可能意味着它不可能实现，除非有一些模糊的漏洞。

欢迎使用。首先，很好的问题格式，但它有点太多的过程，我认为。。。也许你可以发布一个更简单的例子，如果可能的话，可以在jsfiddle上做一个演示。我删除了两种方法之间的比较，因为我可以自己做，我只留下了我真正想问的问题。