javascript/dom - ¿Qué tan caro es crear vs reorganizar nodos dom?

Estoy tratando de optimizar una tabla ordenable que he escrito. El cuello de botella está en la manipulación dom. Actualmente estoy creando nuevas filas de tablas e insertándolas cada vez que clasifico la tabla. Me pregunto si podría acelerar las cosas simplemente reorganizando las filas, sin recrear los nodos. Para que esto haga una diferencia significativa, la reorganización del nodo dom debería ser mucho más ágil que la creación de nodos. ¿Es este el caso? gracias, -Morganjavascript/dom - ¿Qué tan caro es crear vs reorganizar nodos dom?

Fuente

2009-02-16 morgancodes

¿Cuántas filas hay en la tabla que está ordenando? –

cientos, no miles – morgancodes

No voy a publicar esto como una respuesta, ya que se rechazará por no responder a su pregunta, pero ¿ha visto el plugin tablesort para jQuery? - http://tablesorter.com/docs/example-pager.html –

Usted puede encontrar esta página de utilidad para algunos puntos de referencia:

http://www.quirksmode.org/dom/innerhtml.html

Fuente

2009-02-16 18:44:13 Salty

no sé si crear o manipular es más rápido, pero sé que va a ser más rápido si manipulas toda la tabla cuando no está en la página y luego la colocas de una vez. A lo largo de esas líneas, probablemente sea más lento reorganizar las filas existentes en su lugar, a menos que primero se elimine toda la tabla del DOM.

This page sugiere que sería más rápido clonar la tabla actual, manipularla como desee, luego reemplazar la tabla en el DOM.

Fuente

2009-02-16 18:56:40

oh. interesante. Gracias. – morgancodes

Estoy dibujando esta tabla el doble de rápido ahora, usando innerHTML, construyendo todo el contenido como una cadena, en lugar de insertar nodos uno por uno.

Fuente

2009-02-16 22:06:35 morgancodes

wow, de hecho, esa técnica lo empeora mucho en IE6. – morgancodes

En lugar de string = string + newstring, use una matriz: var a = []; while (loop) {a.push (newstring)} result = a.join (""); // La concatenación de cadenas en IE es terriblemente lenta. Hice una prueba una vez donde Opera terminó en aproximadamente 4 segundos, y IE todavía no había terminado después de 20 minutos. – some

Sí, me encontré con eso también, pero con lo que estoy haciendo, parece que aún es más rápido agregar nodos dom que usar innerHTML en IE6. – morgancodes

si puedes, es mejor hacer la manipulación del dom no como una manipulación dom real, sino como algún tipo de método dentro de tu script y luego manipular el dom. Entonces, en lugar de hacer lo que se llama repintar en cada nodo, agrupa lo que habría sido su repintado en cada nodo en su propio método, y luego adjuntar esos nodos a un padre que luego se adjuntará a la dom actual, lo que resulta en solo dos repintados en lugar de cientos. Digo dos b/c que necesita para limpiar lo que está en el dom ya antes de actualizar con sus nuevos datos.

Fuente

2011-03-11 14:54:41 hellatan

que estaba buscando una respuesta a esto y decidí crear un punto de referencia rápida http://jsfiddle.net/wheresrhys/2g6Dn/6/

Utiliza jQuery, por lo que no es un punto de referencia puro, y es probablemente sesgada en otras formas también. Pero el resultado que da es que mover nodos DOM es aproximadamente el doble de rápido que crear y destruir nodos dom cada vez

Fuente

2011-03-30 10:56:17 wheresrhys

javascript/dom - ¿Qué tan caro es crear vs reorganizar nodos dom?

Respuesta

Cuestiones relacionadas