Insertar elementos en un bucle (appendChild dentro de un for) es el pecado capital del rendimiento web. En 2026, la eficiencia se mide en milisegundos.

Solución Rápida (Code Snippet)

Usa un DocumentFragment para “dibujar” tus elementos en una zona invisible de la memoria antes de inyectarlos.

const lista = document.getElementById('miLista');
const fragmento = document.createDocumentFragment();

const datos = ['Elemento 1', 'Elemento 2', 'Elemento 3', '...'];

datos.forEach(texto => {
    const li = document.createElement('li');
    li.textContent = texto;
    li.className = 'list-group-item';
    
    // Añadimos al fragmento (en memoria), NO al DOM real
    fragmento.appendChild(li);
});

// Una única inserción al DOM real = UN SOLO REFLOW
lista.appendChild(fragmento);

Cómo funciona

  1. Memoria vs Pantalla: Un DocumentFragment vive fuera del árbol del DOM. Puedes manipularlo mil veces y el usuario no notará nada.
  2. Cero Reflow: Al insertar el fragmento en la lista, el navegador solo tiene que repintar la pantalla una vez, sin importar si insertaste 3 o 3,000 elementos.
  3. Vaciado Automático: Una vez que inyectas el fragmento en el DOM, este se vacía automáticamente en memoria, lo que ayuda a la gestión de recursos.

¿Cuándo usarlo?

  • Al renderizar resultados de una búsqueda.
  • Al cargar mensajes de un chat.
  • Al generar tablas dinámicas desde un JSON.

Enlaces Internos

Preguntas Frecuentes

¿Puedo usar innerHTML en lugar de fragmentos?

innerHTML es cómodo pero peligroso (vulnerable a XSS) y obliga al navegador a parsear strings como HTML, lo cual es más lento que usar objetos del DOM directamente.

¿Qué es el ‘Virtual DOM’?

Librerías como React usan un concepto similar pero más complejo. DocumentFragment es la forma nativa de obtener beneficios parecidos sin librerías pesadas.