Un DOM virtual es una representación ligera en JavaScript del Modelo de objetos de documento (DOM) utilizado en marcos web declarativos como React , Vue.js y Elm . [1] Dado que generar un DOM virtual es relativamente rápido, cualquier marco dado es libre de volver a renderizar el DOM virtual tantas veces como sea necesario de manera relativamente económica. El marco puede entonces encontrar las diferencias entre el DOM virtual anterior y el actual (comparación) y solo realiza los cambios necesarios en el DOM real (conciliació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.
Entre las técnicas similares se incluyen Glimmer de Ember.js y el DOM incremental de Angular . [4] [5]
Históricamente, la API DOM de JavaScript ha sido inconsistente en los distintos navegadores, complicada de usar y difícil de escalar para proyectos de gran tamaño. Si bien las bibliotecas como jQuery apuntaban a mejorar la coherencia general y la ergonomía de la interacción con HTML, [6] también era propensa a un código repetitivo que no describía bien la naturaleza de los cambios que se estaban realizando y desacoplaba la lógica del marcado.
El lanzamiento de AngularJS en 2010 supuso un importante cambio de paradigma en la interacción entre JavaScript y HTML con la idea de la comprobación sucia. [7] En lugar de declarar y destruir de forma imperativa los detectores de eventos y modificar los nodos individuales del DOM, se realizaba un seguimiento de los cambios en las variables y se invalidaban y volvían a representar las secciones del DOM cuando cambiaba una variable en su ámbito. Este ciclo de resumen proporcionó un marco para escribir un código más declarativo que acoplara la lógica y el marcado de una forma más lógica.
Si bien AngularJS apuntaba a proporcionar una experiencia más declarativa, aún requería que los datos estuvieran explícitamente vinculados y vigilados por el DOM, y se mencionaron preocupaciones de rendimiento sobre el costoso proceso de verificación sucia de cientos de variables. [8] Para aliviar estos problemas, React fue la primera biblioteca importante en adoptar un DOM virtual en 2013, que eliminó tanto los cuellos de botella de rendimiento (ya que comparar y conciliar el DOM era relativamente barato) como la dificultad de vincular datos (ya que los componentes eran efectivamente solo objetos). [9] Otros beneficios de un DOM virtual incluían una seguridad mejorada ya que XSS era efectivamente imposible y una mejor extensibilidad ya que el estado de un componente estaba completamente encapsulado. [10] Su lanzamiento también vino 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 marcos web copiaron la idea general de una representación DOM ideal en la memoria, como Vue.js en 2014, que usaba un compilador de plantillas en lugar de JSX y tenía una reactividad de grano fino incorporada como parte del marco. [11]
En los últimos tiempos, el DOM virtual ha sido criticado por ser lento debido al tiempo adicional requerido para comparar y conciliar los nodos del DOM. [12] Esto ha llevado al desarrollo de marcos sin un DOM virtual, como Svelte , y marcos que editan el DOM en el lugar, como Angular 2 .
React fue pionero en el uso de un DOM virtual para crear componentes de forma declarativa. Los nodos DOM virtuales se construyen utilizando la createElement()función, pero a menudo se transpilan desde JSX para que la escritura de componentes sea más ergonómica. [13] En React basado en clases, los nodos DOM virtuales se devuelven desde la render()función, mientras que en los componentes basados en ganchos funcionales, el valor de retorno de la función en sí sirve como marcado de página.
Vue.js utiliza un DOM virtual para manejar los cambios de estado, pero por lo general no se interactúa con él directamente; en su lugar, se utiliza un compilador para transformar las plantillas HTML en nodos DOM virtuales como un detalle de implementación. [14] Si bien Vue admite la escritura de JSX y funciones de renderizado personalizadas, [15] es más típico utilizar el compilador de plantillas ya que de esa manera no se requiere un paso de compilación.
Svelte no tiene un DOM virtual, y su creador Rich Harris lo llama "pura sobrecarga". [16] En lugar de comparar y conciliar nodos DOM en tiempo de ejecución, Svelte utiliza la reactividad en tiempo de compilación para analizar el marcado y generar código JavaScript que edita directamente el HTML, lo que aumenta drásticamente el rendimiento. [17]
{{cite web}}: CS1 maint: nombres numéricos: lista de autores ( enlace )