Может ли кто-нибудь доказать мне, что данный советВот (скопировано ниже) относительно удаления элементов DOM до их изменения, а затем их повторной вставки происходит быстрее.

Доказывая, я хотел бы увидеть некоторые цифры. Здорово, что они исследуют это, но я думаю, что статья очень слабая, без учета конкретной информации о том, что на самом деле является «проблемой» и как решение устраняется с точки зрения скорости (как заголовок статьи Ускорение JavaScript)

Статья....

Манипуляция DOM вне потока

Этот шаблон позволяет нам создавать несколько элементов и вставлять их в DOM, вызывая одиночное перекомпонование. Он использует то, что называется DocumentFragment. Мы создаем DocumentFragment вне DOM (так что он вне потока). Затем мы создаем и добавляем несколько элементов к этому. Наконец, мы перемещаем все элементы в DocumentFragment в DOM, но запускаем одиночное перекомпонование. Проблема

Давайте создадим функцию, которая изменяет атрибут className для всех якорей в элементе. Мы могли бы сделать это, просто просматривая каждый якорь и обновляя их атрибуты href. Проблема в том, что это может вызвать перекомпоновку для каждого якоря.

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

Решение

Чтобы решить эту проблему, мы можем удалить элемент из DOM, обновить все привязки, а затем вставить элемент обратно туда, где он был. Чтобы помочь достичь этого, мы можем написать многократно используемую функцию, которая не только удаляет элемент из DOM, но также возвращает функцию, которая вставит элемент обратно в исходное положение.

/**
 * 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);
    }
  };
}

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

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();
}