通過附加dom元素來避免zIndex

所以我試圖通過z-index來控制大小相同的元素的堆疊。現在我最近遇到的一個想法是爲了避免瀏覽器通過z-索引，並希望避免瀏覽器迴流來提高性能，而不是通過命令將命令添加到父級。通過附加dom元素來避免zIndex

因此，如果我有一個容器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是申報單數）？如果我理解正確，更改單個元素的z-index應導致瀏覽器重繪或重排。
第二種方法是否按照附加順序工作和堆棧元素？
是否有一種方法可以使用DOM的子節點結構移動子節點，因此我不必創建單獨的鏈接列表？我只看到我現在可以使用的removeChild和appendChild函數。

是的性能是一個問題，因爲我打算使用這個圖形和html5的東西。所以我可以保存的地方我想保存。

來源

2012-10-10 Sarenthenis

歡迎來到SO。首先，問題格式不錯，但處理過程有點過分，我認爲...也許你可以發佈一個更簡單的例子，如果可能的話，在jsfiddle上進行演示。 – elclanrs

我刪除了這些方法之間的比較，因爲我自己可以這樣做，我只是留下了我真正想問的問題。 – Sarenthenis

好吧，看起來我已經回答了我自己的問題，因爲在Opera上玩得很好，而且還有一些研究。在瀏覽器上執行隱藏/不可見元素的更新會更快，然後將其添加到DOM樹中。我從here得到了我的確認。實際的技巧是設置隱藏的CSS標籤，執行所有影響顯示的操作，然後將隱藏設置爲true，並且將瀏覽器從O（n）重新排列到總共2個。

另外這種避免z-index的方法肯定有效。不幸的是，我仍然沒有找到一種方法來訪問DOM元素的childNodes鏈接列表。然而，仔細看看規範，結果發現DOM節點的childNodes是隻讀的，這可能意味着它是不可能的，除非它周圍有一些模糊的黑客攻擊。

來源

2012-10-12 17:31:03 Sarenthenis

通過附加dom元素來避免zIndex

回答

相關問題