¿Podría alguien probarme que el consejo dado?aquí (copiado a continuación) acerca de la eliminación de elementos dom antes de modificarlos y luego volver a insertarlos es cada vez más rápido.

Como prueba, me gustaría ver algunas figuras. Es genial que hayan investigado esto, pero creo que el artículo es muy débil sin incluir información específica sobre qué es el "problema" en realidad y cómo se soluciona la solución en términos de velocidad (como el título del artículo Acelerando JavaScript)

El artículo....

Manipulación de DOM fuera del flujo

Este patrón nos permite crear múltiples elementos e insertarlos en el DOM activando un solo flujo. Utiliza algo llamado DocumentFragment. Creamos un DocumentFragment fuera del DOM (por lo que está fuera del flujo). Entonces creamos y agregamos múltiples elementos a esto. Finalmente, movemos todos los elementos en DocumentFragment al DOM pero desencadenamos un solo flujo. El problema

Hagamos una función que cambie el atributo className para todos los anclajes dentro de un elemento. Podríamos hacer esto simplemente iterando a través de cada ancla y actualizando sus atributos href. El problema es que esto puede causar un reflujo para cada ancla.

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

La solución

Para resolver este problema, podemos eliminar el elemento del DOM, actualizar todos los anclajes y luego insertar el elemento donde estaba. Para ayudar a lograr esto, podemos escribir una función reutilizable que no solo elimina un elemento del DOM, sino que también devuelve una función que insertará el elemento nuevamente en su posición original.

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

Ahora podemos usar esta función para actualizar los anclajes dentro de un elemento que está fuera del flujo, y solo desencadenar un reflujo cuando eliminamos el elemento y cuando insertamos el elemento.

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