Alguém poderia provar para mim que o conselho dadoAqui (copiado abaixo) sobre a remoção de elementos dom antes de alterá-los e, em seguida, reinseri-los é cada vez mais rápido.

Por provar, gostaria de ver alguns números. É ótimo que eles pesquisem isso, mas eu acho que o artigo é muito fraco sem incluir detalhes específicos sobre o que o 'problema' realmente é e como a solução é corrigida em termos de velocidade (como o título do artigo Acelerando JavaScript)

O artigo....

Manipulação de DOM fora do fluxo

Esse padrão nos permite criar vários elementos e inseri-los no DOM acionando um único refluxo. Ele usa algo chamado DocumentFragment. Criamos um DocumentFragment fora do DOM (por isso, está fora do fluxo). Em seguida, criamos e adicionamos vários elementos a isso. Finalmente, movemos todos os elementos no DocumentFragment para o DOM, mas acionamos um único refluxo. O problema

Vamos fazer uma função que altere o atributo className para todas as âncoras dentro de um elemento. Podemos fazer isso simplesmente fazendo iterações em cada âncora e atualizando seus atributos href. O problema é que isso pode causar um refluxo para cada âncora.

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

A solução

Para resolver esse problema, podemos remover o elemento do DOM, atualizar todas as âncoras e, em seguida, inserir o elemento de volta onde ele estava. Para ajudar nisso, podemos escrever uma função reutilizável que não apenas remove um elemento do DOM, mas também retorna uma função que inserirá o elemento de volta à sua posição 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);
    }
  };
}

Agora podemos usar essa função para atualizar as âncoras dentro de um elemento que está fora do fluxo, e somente acionar um refluxo quando removermos o elemento e quando inserirmos o 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();
}