Как избежать zIndex, добавив элементы dom

Question

Поэтому я пытаюсь контролировать укладку элементов одинакового размера через 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

Итак, мои вопросы следующие:

1. Снизит ли это количество повторений в браузере от n до 1 или 2 (где n - это число делений)? Если я правильно понимаю, изменение z-индекса одного элемента должно привести либо к перерисовке браузера, либо к перекомпоновке.
2. Будет ли работать второй подход и составлять элементы в том порядке, в котором вы их добавляете?
3. Есть ли способ уже перемещать дочерние элементы, используя структуру дочерних узлов DOM, поэтому мне не нужно создавать отдельный связанный список? Я вижу только функции removeChild и appendChild, которые я могу использовать в данный момент.

И да, производительность - это проблема, так как я планирую использовать это для графики и HTML5. Поэтому, где я могу сохранить, я бы хотел сохранить.

Answer 1

Что ж, здорово, кажется, я ответил на свой вопрос, поиграв с вещами и проведя некоторые исследования, благодаря хорошим людям из Opera. В значительной степени да, быстрее выполнить обновления скрытых / невидимых элементов в браузере, а затем добавить их в дерево DOM. Я получил подтверждение здесь. Фактический трюк состоит в том, чтобы установить скрытый тег CSS, выполнить все операции, которые влияют на отображение, а затем установить скрытый обратно в значение true, и это уменьшает количество повторных обращений вашего браузера от O(n) до всего 2.

Также этот метод для избежания z-index, безусловно, работает. К сожалению, я до сих пор не нашел способ получить доступ к связанному списку childNodes для элементов DOM. Однако, при более внимательном рассмотрении спецификации выясняется, что childNodes для узлов DOM доступны только для чтения, что, вероятно, означает, что это невозможно, если только вокруг этого нет неясного хака.