Czy ktoś może mi udowodnić, że dana radatutaj (skopiowane poniżej) dotyczące usuwania elementów domowych przed ich zmianą, a następnie ich ponowne wstawianie jest coraz szybsze.

Udowodniłem, że chciałbym zobaczyć kilka liczb. To wspaniałe, że badają ten problem, ale myślę, że artykuł jest bardzo słaby, bez uwzględnienia szczegółów dotyczących tego, czym właściwie jest „problem” i sposobu rozwiązania problemu pod względem szybkości (jak tytuł artykułu Przyspieszenie JavaScript)

Artykuł....

Out-of-the-flow DOM Manipulacja

Ten wzorzec pozwala nam tworzyć wiele elementów i wstawiać je do DOM, uruchamiając pojedynczy przepływ. Używa czegoś zwanego DocumentFragment. Tworzymy obiekt DocumentFragment poza DOMem (więc jest on poza przepływem). Następnie tworzymy i dodajemy do niego wiele elementów. Na koniec przenosimy wszystkie elementy w DocumentFragment do DOM, ale wyzwalamy pojedynczy reflow. Problem

Stwórzmy funkcję, która zmienia atrybut className dla wszystkich kotwic w elemencie. Możemy to zrobić po prostu wykonując iteracje po każdej kotwicy i aktualizując ich atrybuty href. Problem polega na tym, że może to spowodować przepływ dla każdej kotwicy.

function updateAllAnchors(element, anchorClass) {
  var anchors = element.getElementsByTagName('a');
  for (var i = 0, length = anchors.length; i < length; i ++) {
    anchors[i].className = anchorClass;
  }
}

Rozwiązanie

Aby rozwiązać ten problem, możemy usunąć element z DOM, zaktualizować wszystkie kotwice, a następnie wstawić element z powrotem tam, gdzie był. Aby to osiągnąć, możemy napisać funkcję wielokrotnego użytku, która nie tylko usuwa element z DOM, ale także zwraca funkcję, która wstawi element z powrotem do pierwotnej pozycji.

/**
 * Remove an element and provide a function that inserts it into its original position
 * @param element {Element} The element to be temporarily removed
 * @return {Function} A function that inserts the element into its original position
 **/
function removeToInsertLater(element) {
  var parentNode = element.parentNode;
  var nextSibling = element.nextSibling;
  parentNode.removeChild(element);
  return function() {
    if (nextSibling) {
      parentNode.insertBefore(element, nextSibling);
    } else {
      parentNode.appendChild(element);
    }
  };
}

Teraz możemy użyć tej funkcji, aby zaktualizować kotwice w elemencie, który jest poza przepływem, i wywołać przepływ tylko wtedy, gdy usuniemy element i gdy wstawimy element.

function updateAllAnchors(element, anchorClass) {
  var insertFunction = removeToInsertLater(element);
  var anchors = element.getElementsByTagName('a');
  for (var i = 0, length = anchors.length; i < length; i ++) {
    anchors[i].className = anchorClass;
  }
  insertFunction();
}