DOM virtual

Un DOM virtual es una representación JavaScript ligera del Modelo de Objetos del Documento (DOM) que se utiliza en marcos web declarativos como React , Vue.js y Elm . ^{[ 1 ]} Dado que generar un DOM virtual es relativamente rápido, cualquier marco puede volver a renderizarlo tantas veces como sea necesario de forma relativamente económica. El marco puede entonces encontrar las diferencias entre el DOM virtual anterior y el actual (diffing) y solo realiza los cambios necesarios en el DOM real (reconciliación). ^{[ 2 ] [ 3 ]} Si bien técnicamente es más lento que usar solo JavaScript puro, el patrón hace que sea mucho más fácil escribir sitios web con mucho contenido dinámico, ya que el marcado está directamente acoplado con el estado.

Técnicas similares incluyen Glimmer de Ember.js y el DOM incremental de Angular . ^{[ 4 ] [ 5 ]}

Históricamente, la API DOM de JavaScript ha sido inconsistente entre navegadores, engorrosa de usar y difícil de escalar para proyectos grandes. Si bien bibliotecas como jQuery buscaban mejorar la consistencia general y la ergonomía de la interacción con HTML, ^{[ 6 ]} también eran propensas a código repetitivo que no describía bien la naturaleza de los cambios realizados y desacoplaban la lógica del marcado.

El lanzamiento de AngularJS en 2010 supuso un cambio de paradigma importante en la interacción entre JavaScript y HTML con la idea de la comprobación de cambios . ^{[ 7 ]} En lugar de declarar y destruir imperativamente los detectores de eventos y modificar nodos DOM individuales, se realizaba un seguimiento de los cambios en las variables y se invalidaban y volvían a renderizar secciones del DOM cuando cambiaba una variable en su ámbito. Este ciclo de digestión proporcionó un marco para escribir código más declarativo que acoplaba la lógica y el marcado de una manera más lógica.

Si bien AngularJS buscaba brindar una experiencia más declarativa, aún requería que los datos se vincularan explícitamente al DOM y fueran monitoreados por este, y se citaron preocupaciones de rendimiento debido al costoso proceso de verificación de cambios en cientos de variables. ^{[ 8 ]} Para aliviar estos problemas, React fue la primera biblioteca importante en adoptar un DOM virtual en 2013, lo que eliminó tanto los cuellos de botella de rendimiento (ya que la comparación y reconciliación del DOM era relativamente barata) como la dificultad de vincular datos (ya que los componentes eran en efecto solo objetos). ^{[ 9 ]} Otros beneficios de un DOM virtual incluyeron una seguridad mejorada ya que XSS era prácticamente imposible y una mejor extensibilidad ya que el estado de un componente estaba completamente encapsulado. ^{[ 10 ]} Su lanzamiento también coincidió con la llegada de JSX , que acopló aún más HTML y JavaScript con una extensión de sintaxis similar a XML.

Tras el éxito de React, muchos otros frameworks web copiaron la idea general de una representación DOM ideal en memoria, como Vue.js en 2014, que utilizaba un compilador de plantillas en lugar de JSX y tenía una reactividad de grano fino integrada como parte del framework. ^{[ 11 ]}

En los últimos tiempos, el DOM virtual ha sido criticado por ser lento debido al tiempo adicional requerido para comparar y reconciliar los nodos DOM. ^{[ 12 ]} Esto ha llevado al desarrollo de frameworks sin un DOM virtual, como Svelte , y frameworks que editan el DOM en su lugar, como Angular 2 .

• Shadow DOM