Javascript / DOM - lo caro que está creando frente a la reordenación de nodos DOM?

Question

Estoy tratando de optimizar una tabla ordenable que he escrito. El cuello de botella está en la manipulación del DOM. Actualmente estoy creando nuevas filas de la tabla y les insertando cada vez que ordenar la tabla. Me pregunto si yo podría ser capaz de acelerar las cosas por simple reordenación de las filas, no recrear los nodos. Para esto para hacer una diferencia significativa, la reordenación nodo DOM tendría que ser mucho más ágil que la creación de nodo. ¿Es este el caso? Gracias, -Morgan

Answer 1

No sé si crear o manipular es más rápido, pero sé que va a ser más rápido si se manipula toda la tabla cuando no está en la página y luego se coloca en todos a la vez. En ese sentido, probablemente será más lento para volver a organizar las filas existentes en su lugar a menos que toda la tabla se elimina de la primera DOM.

Esta página sugiere que sería más rápido para clonar la tabla actual, manipularla como desee, luego vuelva a colocar la mesa en el DOM.

Answer 2

Estoy dibujando esta tabla aproximadamente el doble de rápido ahora, usando innerHTML, la construcción de todo el contenido como una cadena, en vez de insertar los nodos de una en por.

Answer 3

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

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

Answer 4

si es posible, es mejor hacer la manipulación del DOM no como la manipulación real dom, sino como una especie de método dentro de la secuencia de comandos y luego manipular el DOM. Así que en lugar de hacer lo que se llama un repintado en cada nodo único, que aglutinan el que habría sido su repintado en cada nodo único en su propio método, y luego conectar los nodos en una matriz que luego se une al dom real, lo que resulta en tan sólo dos vuelve a pintar en lugar de cientos. Yo digo dos b / c que necesita para la limpieza de lo que es en el Reino ya antes de actualizar con los nuevos datos.

Answer 5

Yo estaba buscando una respuesta a esta y decidió establecer un punto de referencia rápida http: // jsFiddle .NET / wheresrhys / 2g6Dn / 6 /

Se 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 al mover nodos DOM es aproximadamente dos veces más rápido que la creación y detroying dom linfáticos cada vez