Пакетное добавление / удаление / редактирование элементов и дочерних элементов Javascript DOM всего за 2 вызова DOM

Question

Немного предыстории, чтобы понять, как это работает

У меня есть иерархия объектов Javascript, в этом случае я буду называть их спрайтами. Каждая ссылка на Sprite 1: 1 является элементом HTML.

Это слой абстракции для HTML & CSS;

В настоящее время при изменении свойства:

mySprite.set('width', 100);

он не будет обновлять элемент HTML синхронно, но запустит таймер в миллисекундах, чтобы дождаться других изменений, примененных к этому элементу HTML.

---

Ex:.

mySpite.set('width', 100);

после этого изменения спрайт становится недействительным и через 25 миллисекунд обновит элемент HTML

mySprite.set('height', 100);

теперь это перезапустит таймер на 25 миллисекунд и будет ждать 25 миллисекунд, чтобы обновить DOM одновременно с шириной и высотой вместо 2 изменений DOM

---

Проблема

Теперь проблема, с которой я сталкиваюсь, такова: (Иерархия ниже представляет иерархию Sprites, давайте назовем их по имени, которое они имеют)

У меня есть эта иерархия и я представляю, что спрайты "aaaba" и "aaabc" меняют свой стиль. Затем спрайт "aaab" добавляет еще 3 дочерних спрайта (они показаны в скобках, "aaabd", "aaabe" и "aaabf").

или пошагово:

1. aaaba.set ('ширина', 100);
2. aaabc.set ('высота', 45);
3. aaab.addChildren (... 3 детей ...);

До сих пор я не хотел бы делать какие-либо обновления для DOM. После того, как все спрайты изменили свои свойства, добавили и удалили другие спрайты (КАК ОТКРЫТЬ ЭТОТ МОМЕНТ? С другим таймером 25 миллисекунд?), Я бы хотел работать так:

1. Удалите элементы из DOM, которые собираются внести серьезные изменения: aaa.removeChild (aaab)
2. Измените стиль, и поскольку они не в DOM, поскольку их родитель был удален на шаге 1, это не будет так дорого: aaaba.style.cssText = aaabc.style.cssText = "my new css"
3. Присоединить дочерние элементы к элементу "aaab"
4. Добавьте снова «aaab» к «aaa»: aaa.appendChild (aaab);

Таким образом, быстрее вносить изменения в DOM.

 a
 |-aa
 | |-aaa
 | | |-aaaa
 | | |-aaab<
 | | | |-aaaba<
 | | | |-aaabb
 | | | |-aaabc<
 | | | |-(aaabd)<
 | | | |-(aaabe)<
 | | | |-(aaabf)<
 | | |-aaac
 | | |-aaad
 | |-aab
 | | |-aaba
 | | |-aabb
 | |-aac
 |-ab
 | |-aba
 | |-abb
 |-ac
   |-aca
   |-acb

Answer 1

Полагаю, нет необходимости удалять что-либо из дерева элементов, которое не является частью документа.
Вот алгоритм (я ничего не знаю о вашей объектной модели, поэтому я все придумал)

function applyChanges (sprite, detached) {
    var detach = false, container
    if (!detached) {
        for (var i = 0; i < sprite.childSprites.length; i++) {
            if (areChangesMajor(sprite.childSprites[i])) {
                detach = true
                break
            }
        }
    }
    if (detach) {
        container = sprite.element.parentNode
        container.removeChild(sprite.element)
        detached = true
    }
    // ...
    // your stuff (applying styles, adding child sprites, etc) should be there
    // ...
    for (var i = 0; i < sprite.childSprites.length; i++) {
        applyChanges(sprite.childSprites[i], detached)
    }
    if (detach) {
        container.appendChild(sprite.element)
    }
}