Eliminando eficientemente los nodos de texto del DOM

Question

Sin entrar en demasiados detalles, estoy limpiando los espacios en blanco dentro de las tablas usando javascript. Necesito eliminar grandes cantidades de textnodes. Este parece ser el cuello de botella en mi script cuando se trata de IE9.

Todos los siguientes métodos hacen el trabajo, pero causan una enorme desaceleración.

domNode.removeNode(true); 
domNode.nodeValue = ""; 
domNode.parentNode.removeChild(domNode); 

Hay una manera de hacer una eliminación a granel o una manera de ocultarlos en el dom o tal. Solo algo más rápido.

También he intentado esto en los textnodes:

domNode.innerHTML = ''; 

Mientras se ejecuta rápidamente, los textnodes parecen ser unphased por ella.

Además, tengo que conservar los enlaces de eventos para que un .innerHTML reemplazar en toda la tabla realmente no parezca una opción. Aunque funciona aproximadamente 5 veces más rápido.

Actualización: puntos de referencia Rough en soluciones sugeridas:

//around 480ms 
stripWhitespaceTextNodes(domNode); 

//around 640ms 
parent.removeChild(domNode); 
stripWhitespaceTextNodes(domNode); 
parent.insertBefore(domNode, nextNode); 

//around 700ms 
tables[i].style.visibility = 'hidden'; 
stripWhitespaceTextNodes(domNode); 
tables[i].style.visibility = 'visible'; 

//around 1140ms 
tables[i].style.display = 'none'; 
stripWhitespaceTextNodes(domNode); 
tables[i].style.display = 'block'; 

Esto se hizo en 4 mesas con una tabla que tiene 1500 filas.

El quid de la función stripWhitespaceTextNodes() es la eliminación de los nodos de texto, esto parece ser el cuello de botella y aquí están mis varios intentos de hacerlo.

domNode.parentNode.removeChild(domNode); 
domNode.removeNode(true); 
domNode.nodeValue = ""; // <-- CURRENTLY THIS ONE IS THE TOP RUNNER 
domNode.replaceWholeText(''); 
domNode.deleteData(0, domNode.length); 

var txtNode = document.createTextNode(""); 
domNode.parentNode.replaceChild(txtNode, domNode); 
parent.insertBefore(domNode, nextNode); 

//fast but doesn't work 
domNode.innerHTML = ''; 

Answer 1

Una manera de hacerlo es clonar toda la tabla y hacer manipulaciones "fuera del lugar". Significa hacer las operaciones al clon donde el clon no está en el DOM. Después, haga una sola sustitución de la tabla completa con el clon modificado. De esa forma, las operaciones no se estancarán.

Here's an answer que se refiere a varios métodos para "clonar" el DOM y crear "elementos de contenedor" para operaciones fuera del DOM.

Answer 2

El truco habitual para esto es eliminar el contenedor en el que realiza estas operaciones desde el DOM antes de realizar los grandes cambios, y luego volver a colocarlo cuando haya terminado.

Así, en su caso, que podría ser:

var table = /* ...get a reference to the table...*/; 
var nextNode = table.nextSibling; // May be null, that's fine 
var parent = table.parentNode; 
parent.removeChild(table); 
/* ...clean up the text nodes... */ 
parent.insertBefore(table, nextNode); 

Los controladores de eventos permanecen unidos incluso cuando el árbol se separa del DOM de la página, así que estarán allí cuando el árbol se vuelve a poner.

Answer 3

Puede intentar separar su tabla (elemento DOM de tabla) del documento, caminar sobre ella y eliminar los nodos de texto en blanco como lo hace, y luego insertar la tabla en la posición original. En teoría, debería ganar velocidad: Render Tree no necesitaría actualizarse en cada pase, lo que es costoso para las tablas de los documentos.