Rendimiento para agregar elementos grandes/conjuntos de datos al dom

Question

Estoy agregando grandes cantidades de elementos de la fila de la tabla a la vez y experimentando algunos cuellos de botella importantes. En este momento estoy usando jQuery, pero estoy abierto a una solución basada en Javascript si hace el trabajo.

Tengo la necesidad de anexar de 0 a 100 filas de tablas en un momento determinado (en realidad es potencialmente más, pero voy a paginar algo más de 100).

En este momento estoy anexando cada fila de la tabla individualmente al dom ...

loop { 
    ..build html str... 
    $("#myTable").append(row); 
} 

Entonces todos ellos se desvanecen en una vez

$("#myTable tr").fadeIn(); 

Hay un par de cosas a considerar aquí. ..

1) Estoy vinculando los datos a cada fila de la tabla individual, por lo que cambié de un anexo masivo a filas individuales anexas en primer lugar.

2) Me gusta mucho el efecto de fundido. Aunque no es esencial para la aplicación, soy muy importante en estética y animaciones (que, por supuesto, no distraen el uso de la aplicación). Simplemente tiene que haber una buena forma de aplicar un efecto de fundido modesto a grandes cantidades de datos.

(editar) 3) Una razón importante para acercarse a mí esto de la manera trozo/recursivo es más pequeño que necesito para enlazar datos específicos para cada fila. ¿Estoy vinculando mis datos mal? ¿Hay una mejor manera de realizar un seguimiento de estos datos que vincularlo a sus respectivos tr?

---

¿Es mejor aplicar afecta/manipulaciones de DOM en grandes trozos o pedazos más pequeños en las funciones recursivas?

¿Hay situaciones en las que es mejor hacer una u otra? De ser así, ¿cuáles son los indicadores para elegir el método apropiado?

Answer 1

Eche un vistazo a este post by John Resig, explica el beneficio de usar DocumentFragments al hacer grandes adiciones al DOM.

Un DocumentFragment es un contenedor al que puede agregar nodos sin alterar realmente el DOM de ninguna manera. Cuando esté listo, agregue el fragmento completo al DOM y esto coloca su contenido en el DOM en una sola operación.

También, haciendo $("#myTable") en realmente no se recomienda a cada iteración - lo hacen una vez antes del bucle.

Answer 2

sospecho que sus problemas de rendimiento se deben a que está modificando el DOM varias veces, en su ciclo.

En su lugar, intente modificarlo una vez que obtenga todas sus filas. Los navegadores son realmente buenos en innerHTML reemplaza. Pruebe algo como

$("#myTable").html("all the rows dom here"); 

tenga en cuenta que podría tener que jugar con el selector exacto para usar, para obtener el dom en el lugar correcto. Pero la idea principal es usar innerHTML, y usarlo lo menos posible.