No me queda claro si el navegador inicia el reflujo durante el tiempo de ejecución del script o después de la ejecución. Entonces, básicamente, si tengo un bucle (100 iteraciones), que inserta un elemento en el DOM, el navegador detiene la ejecución del script, vuelve a calcular el diseño con el elemento insertado, vuelve a pintar en cada paso. ¿Y luego viene el siguiente paso? ¿O inserta el elemento 100 sin parar y luego viene el reflujo?
Para traducirlo a código, ¿hay alguna diferencia de rendimiento entre los dos códigos?
for(let i = 0; i < 100; i++){ $('body').append('<div>SOmething....</div>') }O es mejor?
let a = $('<div></div>'); for(let i = 0; i < 100; i++){ $(a).append('<div>SOmething....</div>') } $('body').append(a)¿O tal vez hay una solución mejor y más eficiente para insertar una gran cantidad de elementos (10000 o incluso más) en el DOM que no ralentiza tanto el navegador?
En los navegadores modernos, el reflujo ocurrirá solo cuando sea necesario, es decir, en tiempo de inactividad (Safari), justo antes de la siguiente pintura (en Chrome y Firefox, o Safari si no estuvo inactivo antes), o al llamar a uno de los pocos métodos que fuerce un reflujo (más detalles en esta respuesta mía ).
Cada modificación al DOM no forzará un reflujo por sí sola, en su código solo ocurrirá una, antes del próximo repintado.
Sin embargo, agregar el DOM en sí tiene algún costo, así que sí, hay una diferencia de rendimiento entre ambos códigos, pero esta diferencia será mínima.
Agregar a un DocumentFragment puede ser mejor; en algunos casos, la creación de una gran cadena de marcado funciona más rápido, pero realmente debería reconsiderar su necesidad de agregar 10000 elementos.
En cambio, ¿ha considerado un sistema de paginación o uno de desplazamiento infinito? De esta manera, agregaría solo una pequeña parte del todo cada vez, dejando que el navegador respire y maneje la presión de la memoria. Como mínimo, podría considerar agregar sus elementos por lotes y dejar que el bucle de eventos realmente se reproduzca (y el navegador represente lo que pueda) entre cada lote usando setTimeout .