Dom virtual vs Dom de las sombras

Este artículo explica los conceptos DOM, Virtual DOM y Shadow DOM y sus diferencias...

Índice
  1. DOM
  2. DOM virtuales
  3. DOM fantasma

DOM

DOM abreviado a Modelo de objeto de documento - Es una forma de representar contenido estructurado a través de objetos. HTML, XHTML, XML son algunas de las formas de escribir contenido estructurado.

Cuando el navegador muestra una página HTML, de alguna manera compila este código HTML en segundo plano y genera un objeto DOM. Este objeto DOM puede ser accedido y manipulado por JavaScript y CSS por ejemplo, cuando hace clic en un botón, se activa un evento de clic de DOM que JavaScript puede escuchar y manipular DOM para mostrar un cuadro de diálogo emergente.

De forma predeterminada, cuando hay un cambio en el objeto DOM, el navegador muestra la página completa. De esta forma, los cambios de DOM son costosos en términos de rendimiento.

Para solucionar este problema han aparecido nuevos conceptos. Veámoslos: -

DOM virtuales

  • El DOM virtual es un representación en memoria del DOM real.
  • Los marcos de interfaz de usuario populares React.js y Vue.js usan Virtual DOM.
  • El concepto de DOM virtual consiste principalmente en resolver el problema de rendimientoAsí es cómo:-
    1. Cualquier actualización en el DOM se aplicó primero al DOM virtual en lugar de aplicar directamente al DOM real. Luego compara los cambios con el DOM real a través de una llamada de proceso diferente y aplique cambios de manera efectiva al DOM real al representar solo los elementos modificados.
    2. Además, permite recopilar múltiples cambios para aplicar al mismo tiempopor lo tanto, cada cambio no provoca una nueva representación, sino que la nueva representación solo ocurre una vez después de que se haya aplicado un conjunto de cambios desde el DOM virtual al DOM real

DOM fantasma

  • Puedes pensar en el shadow DOM como un DOM dentro de un DOM. Un DOM real puede tener muchos DOM ocultos, pero cada DOM compartido tiene su propio árbol DOM aislado con sus propios elementos y estilos, completamente aislado del DOM real.
  • El concepto Shadow DOM es compatible de forma nativa con la mayoría de los navegadores, incluidos Firefox, Chrome, Opera y Safari.
  • Puede crear componentes web nativos reutilizables que sigan el concepto Shadow DOM. La implementación y el estilo del componente web nativo están ocultos en DOM Shadow y no tienen impacto en el DOM externo.
  • Polymer LitElement y Vaadin proporcionan componentes web reutilizables de código abierto creados con el concepto shadow DOM.
Shadow DOM no es un concepto nuevo

Aunque recientemente se especificó para su uso por parte de los autores web, los agentes de usuario han utilizado el shadow DOM durante años para crear y diseñar componentes complejos, como elementos de formulario. Tome el elemento de entrada de rango, por ejemplo. Para crear uno en la página, simplemente agregue el siguiente elemento:

Este elemento da el siguiente componente:

Si profundizamos, veremos que este <input> el elemento en realidad está compuesto por varios pequeños <div> elementos, controlando la pista y el control deslizante en sí.

Esto se logra utilizando Shadow DOM. El elemento que está expuesto al documento HTML anfitrión, el simple <input>pero debajo hay elementos y estilos relacionados con los componentes que no forman parte del alcance general del DOM.

Si quieres conocer otros artículos parecidos a Dom virtual vs Dom de las sombras puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas