¿Alguna vez te has preguntado por qué frameworks como React son tan rápidos y eficientes al actualizar la interfaz de usuario? Una de las claves está en algo llamado Virtual DOM.
Pero no te preocupes, no vamos a meternos en un mar de términos técnicos desde el inicio. Imaginemos primero un escenario simple:
🍎 Imaginemos una canasta de manzanas...
Piensa que tienes una canasta con 5 manzanas. Un niño viene y se come una. Tú podrías revisar toda la canasta, manzana por manzana, para saber cuál falta. O… podrías haber anotado la posición de cada una y simplemente comparar lo que anotaste con lo que hay ahora. Mucho más rápido, ¿no?
Eso es básicamente lo que hace el Virtual DOM.
¿Qué es el DOM?
Document Object Model (DOM) es la estructura en forma de árbol que los navegadores crean a partir de tu HTML. Cada etiqueta, cada texto, cada imagen, es un nodo en ese árbol. Manipular este árbol directamente puede ser lento, sobre todo cuando hay muchos cambios pequeños.
Si eres más visual, esto te servirá, esto es el HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo DOM</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Esto es un párrafo</p>
</body>
</html>
Y este sería su "árbol":
DOCUMENT
├── html
│ ├── head
│ │ └── title
│ │ └── "Ejemplo DOM"
│ └── body
│ ├── h1
│ │ └── "Hola Mundo"
│ └── p
│ └── "Esto es un párrafo"
¿Y cuáles son los nodos? Pues estos:
-
DOCUMENT: el nodo raíz (el documento entero) -
ELEMENT: cada etiqueta HTML (, , etc.) -
TEXT: el texto dentro de los elementos -
ATTRIBUTE: atributos como class, id, etc. (no siempre se representan como nodos en todas las APIs) -
COMMENT: comentarios en el HTML
Una forma de acceder a este sería:
const titulo = document.querySelector('h1');
console.log(titulo.nodeName); // "H1"
console.log(titulo.firstChild.nodeValue); // "Hola Mundo"
En entonces ¿Por qué no acceder al DOM de esta forma?
Modificar el DOM real constantemente, especialmente en apps dinámicas, puede generar muchos re-renderizados innecesarios. Esto impacta negativamente en el rendimiento.
Es acá donde nace el concepto de "Virtual DOM"
Virtual DOM 💡
El Virtual DOM es una copia ligera del DOM real, que vive en memoria. Cada vez que hay un cambio en tu app, React, Vue, etc, actualizan esta copia primero. Luego, hacen una comparación inteligente a la que se conoce como diffing (diferenciado) entre la versión antigua y la nueva del Virtual DOM, para detectar exactamente qué cambió. Finalmente, se aplican solo esos cambios mínimos al DOM real.
Esto hace que las actualizaciones sean mucho más rápidas y eficientes ⚡.
¿Cómo se vería el Virtual DOM?
En un ejemplo con React, este sería el Virtual DOM:
// React-style Virtual DOM node
const vdom = {
type: 'div',
props: {},
children: [
{
type: 'h1',
props: {},
children: ['Hola'],
},
{
type: 'p',
props: {},
children: ['Contador: 0'],
},
],
};
Lo que básicamente se hace, es crear una versión actualizada del vDOM y compararla con la antigua.
¿Entonces el Virtual DOM es perfecto?
No. Aunque mejora mucho el rendimiento, no es "gratis", hay un costo de procesamiento en crear las copias y compararlas. Por eso en apps muy simples, puede no ser necesario. Pero para aplicaciones con muchas actualizaciones de interfaz, es una bendición.
Conclusión
El Virtual DOM es como una libreta con la posición de nuestras manzanas. No evita los cambios, pero los vuelve más inteligentes. En lugar de revisar toda la canasta, solo miramos lo justo y necesario.
Así, tus aplicaciones se mantienen rápidas, eficientes y agradables de usar.
Top comments (1)
El Virtual DOM no es ninguna bendición. Sí, es mejor que recrear los árboles completos indiscriminadamente, pero es mucho peor que no usar ningún Virtual DOM y más bien hacer ajustes quirúrgicos, como lo hace Svelte y SolidJS. Los resultados de pruebas de estrés demuestran clara y fácilmente este hecho, donde React está entre los peores de la lista.