57

DOM vs. Virtual DOM | ¿Cuál es la mejor estrategia de render en el navegador?

132934Puntos

hace 4 meses

Curso de Frameworks y Librerías de JavaScript
Curso de Frameworks y Librerías de JavaScript

Curso de Frameworks y Librerías de JavaScript

¿React, Vue, Angular o Svelte? Comprende la diferencia entre un framework y librería de JavaScript. Explora el ecosistema del desarrollo frontend y compara las ventajas de sus herramientas principales. Descubre el poder de usar componentes, reactividad, CSS-in-JS y estrategias de routing en el diseño de una aplicación web.

El DOM o Document Object Model es el árbol de nodos que generan los navegadores para entender nuestro código HTML. Y el Virtual DOM es un falso DOM, una copia que nos permite hacer cálculos pesados sin afectar el rendimiento del verdadero DOM.

JavaScript puede manipular el DOM para interactuar con los usuarios de nuestra página web. Usar el Virtual DOM podría reducir el trabajo del DOM y mejorar su rendimiento, pero también podría ser un paso innecesario que solo consume tiempo y memoria RAM. Ahí la discusión.

En este blogspot quiero mostrarte diferentes argumentos alrededor de usar o no el Virtual DOM para manipular el DOM con JavaScript.

Manipulación del DOM

Los navegadores nos proporcionan diferentes APIs para manipular el DOM con JavaScript.

Algunas APIs como document.getElementByID o document.querySelector nos permiten leer el contenido de nuestro documento HTML, incluso valores escritos por cada usuario. Otras funciones como innerHTML o appendChild nos permiten cambiar el HTML que ven nuestros usuarios.

Pero el secreto de la manipulación del DOM son los eventos. Escuchar las acciones de los usuarios desde JavaScript y dependiendo de lo que hagan ejecutar nuestro código (leer y/o actualizar el documento HTML).

Curso de Manipulación del DOM

Cómo funciona el Virtual DOM

El Virtual DOM es una representación del DOM.

Actualizar el DOM es una operación muy costosa para el navegador. Muchas veces no necesitamos actualizar absolutamente todas nuestra aplicación, sino únicamente secciones específicas del contenido.

Pero hacer estos cálculos también es costoso para el navegador. Leer el DOM y hacer comparaciones para analizar qué debe actualizarse y qué no también puede consumir bastante tiempo.

El virtual DOM es una representación del DOM en la memoria del navegador, un intermediario entre el DOM y nosotros para hacer comparaciones sin afectar al DOM real de la aplicación. Así cuando interactuamos con el verdadero DOM le pedimos únicamente los cambios que realmente necesitamos, nada más.

Pero no todo es color de rosas. ⚠️

Muchas personas y herramientas importantes de JavaScript consideran que el virtual dom es un paso innecesario al renderizar aplicaciones. Explican que manipular el DOM, así sea costoso, no afecta tan exagerada y drásticamente el rendimiento de las aplicaciones web. Por lo que solo agrega complejidad, redundancia y gasto sin sentido de la memoria.

Cuándo usar o no el Virtual DOM

Los frameworks y librerías más importantes de JavaScript tienen opiniones muy fuertes entre manipular directamente el DOM o usar como intermediario al Virtual DOM.

React.js y Vue.js apostaron por el Virtual DOM. Confían en que crear una copia del DOM para hacer sus cálculos y procesos de optimización les ayudará a ofrecer un mejor rendimiento para nuestras aplicaciones.

Pero Angular y Svelte apuestan por manipular el DOM directamente. Se oponen a crear y mantener copias completas del DOM. Incluso prefieren optar por estrategias como crear un “mini virtual dom” para cada componente en específico que deban renderizar.

Pero, Juan, no entendí. ¿Entonces uso o no uso el Virtual DOM?

Todas las herramientas se esforzarán por ofrecer el mejor rendimiento con su estrategia de render preferida, pero los resultados cambiarán con cada distinto caso de uso, actualización de versiones o nuevas características a soportar.

El veredicto final es que no hay una respuesta definitiva. Usar o no el Virtual DOM depende completamente de tu proyecto, las herramientas con las que decidas construirlo y el rendimiento que te ofrezcan para cada caso en particular.

Mi recomendación es que estudies constantemente las mejores prácticas de optimización para tu aplicación web, ya sea aplicando diferentes paradigmas en tu código o mejorando la configuración de tus empaquetadores web.


Si quieres conocer mucho más sobre la reactividad y las estrategias de render de los frameworks o librerías más populares de JavaScript, te recomiendo tomar el Curso de Frameworks y Librerías de JavaScript y profundizar en el ecosistema completo del desarrollo frontend moderno.

#NuncaParesDeAprender 🤓💚

Curso de Frameworks y Librerías de JavaScript
Curso de Frameworks y Librerías de JavaScript

Curso de Frameworks y Librerías de JavaScript

¿React, Vue, Angular o Svelte? Comprende la diferencia entre un framework y librería de JavaScript. Explora el ecosistema del desarrollo frontend y compara las ventajas de sus herramientas principales. Descubre el poder de usar componentes, reactividad, CSS-in-JS y estrategias de routing en el diseño de una aplicación web.
Juan David
Juan David
juandc

132934Puntos

hace 4 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
6
12683Puntos

Like si pensaste en Doom Eternal

2
21798Puntos

Buen post acerca del Dom y el virtual Dom!

2

Gracias por el aporte estoy haciendo el curso de manipulación del DOM

2
14739Puntos

No había visto este tipo de comparación, ¡muy buen post!

2
9268Puntos

Super buen post!

2

Fan de Juandc. Gracias por compartir tu pasión con todos!

2
34304Puntos

Excelente post, prontito estare sacando los respectivos cursos 😃

2
6737Puntos

“Quiero ser como tu cuando sea grande”. Gracias Juan!

2
9807Puntos

Hoy por hoy la respuesta es usar el que mejor experiencia brinde, a usuarios y clientes!

En cuanto a React se refiere podemos aprender métodos que quiten carga y peso a nuestras aplicaciones, podemos mejorar el performance de diversas maneras.