1

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

因此，如果我有一个包含所有堆叠 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

所以我的问题如下：

  1. 这会将浏览器回流从 n 次回流减少到 1 或 2 次（其中 n 是 div 的数量）？如果我理解正确，更改单个元素的 z-index 应该会导致浏览器重绘或重排。
  2. 第二种方法是否会按照您添加元素的顺序工作和堆叠元素？
  3. 有没有办法使用 DOM 的子节点结构来移动孩子，所以我不必创建单独的链表？我只看到我目前可以使用的 removeChild 和 appendChild 函数。

是的，性能是一个问题，因为我打算将它用于图形和 html5 的东西。所以我可以保存我想保存的地方。

4

1 回答 1

0

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

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

于 2012-10-12T17:31:03.397 回答