通过附加 dom 元素避免 zIndex答案

【问题标题】：Avoiding zIndex by appending dom elements通过附加 dom 元素避免 zIndex
【发布时间】：2012-10-01 11:39:03
【问题描述】：

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

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

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-index 应该会导致浏览器重绘或重排。
第二种方法是否会起作用并按照您添加元素的顺序堆叠元素？
有没有办法使用 DOM 的子节点结构来移动子节点，这样我就不必创建单独的链表了？我目前只看到可以使用的 removeChild 和 appendChild 函数。

是的，性能是一个问题，因为我计划将其用于图形和 html5 内容。所以我想保存在哪里可以保存。

【问题讨论】：

欢迎来到 SO。首先是很好的问题格式，但我认为处理起来有点太多了......也许你可以发布一个更简单的例子，如果可能的话，在 jsfiddle 有一个演示。
我删除了方法之间的比较，因为我自己可以做到这一点，我只是留下了我真正想问的问题。

标签： javascript performance dom z-index reflow

【解决方案1】：

太好了，多亏了 Opera 的好人，在玩弄了一些东西和一些研究之后，我似乎已经回答了我自己的问题。几乎是的，在浏览器上对隐藏/看不见的元素执行更新，然后将其添加到 DOM 树中会更快。我收到了来自here 的确认。实际的技巧是设置隐藏的 CSS 标记，执行所有影响显示的操作，然后将隐藏设置回 true，这样可以将浏览器的重排从 O(n) 减少到总共只有 2 个。

同样，这种避免 z-index 的方法确实有效。不幸的是，我仍然没有找到访问 DOM 元素的 childNodes 链表的方法。但是，仔细查看规范，事实证明 DOM 节点的 childNodes 是只读的，这可能意味着除非有一些模糊的 hack，否则这是不可能的。

【讨论】：