¿Tu web se vuelve lenta al manipular muchos elementos?
¡Aprende a optimizar el DOM y mejora la experiencia de usuario!
¿Qué es el DOM y por qué importa el rendimiento?
El DOM (Document Object Model) es la representación en memoria de la estructura HTML de una página. Manipular el DOM es esencial para crear interfaces dinámicas, pero hacerlo de forma ineficiente puede volver tu web lenta.
Problemas comunes de rendimiento al manipular el DOM
- Modificar el DOM en bucles grandes
- Forzar reflows y repaints innecesarios
- Acceder repetidamente a propiedades costosas (como
offsetHeight) - No usar fragmentos o plantillas
Buenas prácticas para optimizar el DOM
1. Minimiza el número de manipulaciones
En vez de modificar el DOM en cada iteración, construye el HTML en memoria y agrégalo de una sola vez:
const lista = document.getElementById('mi-lista');
let html = '';
for (let i = 0; i < 1000; i++) {
html += `<li>Elemento ${i}</li>`;
}
lista.innerHTML = html;2. Usa DocumentFragment para inserciones masivas
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const li = document.createElement('li');
li.textContent = `Elemento ${i}`;
fragment.appendChild(li);
}
document.getElementById('mi-lista').appendChild(fragment);3. Evita forzar reflow/repaint en bucles
Acceder a propiedades como offsetHeight o clientWidth dentro de bucles puede forzar el navegador a recalcular estilos muchas veces.
Ejemplo: Malas prácticas vs buenas prácticas
❌ Mal ejemplo (lento):
for (let i = 0; i < 1000; i++) {
const li = document.createElement('li');
li.textContent = `Elemento ${i}`;
document.getElementById('mi-lista').appendChild(li);
}✅ Buen ejemplo (rápido):
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const li = document.createElement('li');
li.textContent = `Elemento ${i}`;
fragment.appendChild(li);
}
document.getElementById('mi-lista').appendChild(fragment);Delegación de eventos
En vez de agregar un listener a cada elemento, agrégalo al contenedor y usa el event bubbling:
document.getElementById('mi-lista').addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
alert('Clic en ' + e.target.textContent);
}
});Usa plantillas (<template>) para clonar nodos
<template id="item-template">
<li class="item"></li>
</template>const template = document.getElementById('item-template');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const clone = template.content.cloneNode(true);
clone.querySelector('li').textContent = `Elemento ${i}`;
fragment.appendChild(clone);
}
document.getElementById('mi-lista').appendChild(fragment);Herramientas para analizar el rendimiento del DOM
- Chrome DevTools: Pestañas Performance y Elements
- Lighthouse: Audita el rendimiento de tu web
- Web Vitals: Mide métricas clave como LCP, FID, CLS
Buenas prácticas adicionales
- Usa clases en vez de estilos inline para cambios masivos
- Elimina nodos que ya no se usan
- Usa
requestAnimationFramepara animaciones - Prefiere frameworks modernos (React, Vue, Astro) para UIs complejas
Recursos útiles
¿Listo para optimizar tu web?
¡Con buenas prácticas de manipulación del DOM, tu sitio será más rápido y profesional!
Explorar etiquetas