¿Implementar Shadow DOM en mis proyectos los hará más rápidos como el DOM virtual que usa React?
DOM virtual
El DOM virtual se trata de evitar cambios innecesarios en el DOM, que son costosos en cuanto al rendimiento, porque los cambios en el DOM generalmente provocan una nueva representación de la página. El DOM virtual también permite recopilar varios cambios para aplicarlos a la vez, por lo que no todos los cambios provocan una repetición, sino que la repetición solo ocurre una vez después de que se haya aplicado un conjunto de cambios al DOM.
DOM de sombra
Shadow dom se trata principalmente de encapsular la implementación. Un solo elemento personalizado puede implementar una lógica más o menos compleja combinada con un DOM más o menos complejo. Una aplicación web completa de complejidad arbitraria se puede agregar a una página mediante una importación y <body><my-app></my-app>también se pueden implementar componentes reutilizables y componibles más simples como elementos personalizados donde la representación interna está oculta en la sombra como DOM <date-picker></date-picker>.
La encapsulación de estilos Shadow DOM también se trata de evitar que los estilos se apliquen accidentalmente a elementos que el diseñador no pretendía, por ejemplo, porque el CSS o la biblioteca de componentes que está utilizando cambió un selector que ahora se aplica a otros elementos que usan los mismos nombres de clase CSS. Los estilos agregados a los componentes tienen el alcance de ese componente y se evita el sangrado o la entrada de estilos.
Shadow DOM y rendimiento
Aunque shadow DOM no se trata de rendimiento en primer lugar, también tiene implicaciones de rendimiento. Debido a que los estilos tienen un alcance, el navegador puede hacer suposiciones sobre algunos cambios para afectar solo un área limitada de la página (el DOM en la sombra de un elemento personalizado), lo que puede limitar la reproducción al área de dicho componente, en lugar de volver a generar toda la página.
Esta es la razón por la que >>>, /deep/y ::shadowcombinadores CSS, lo que permitió aplicar estilos a través de fronteras sombra DOM, quedaron en desuso y están sujetos a ser retirados antes de Chrome (otros navegadores no los tenían que yo sepa). La mera existencia de estos combinadores impide el tipo de optimización mencionado en el párrafo anterior.
Angular2 utiliza las ventajas de ambos mundos.
Utiliza un flujo de datos unidireccional y ejecuta la detección de cambios solo en el modelo. Si detecta cambios, hace que el DOM se actualice actualizando enlaces y haciendo directivas estructurales como *ngFor,*ngIf , ... actualizar el DOM. Por lo tanto, el DOM solo se actualiza cuando el modelo realmente cambió.
Angular2 usa Shadow DOM (solo con el ViewEncapsulation.Nativeque actualmente no es el predeterminado) para utilizar las capacidades de encapsulación de estilo proporcionadas por el navegador, o (predeterminado actual) simplemente emula la encapsulación de estilo reescribiendo los estilos agregados a los componentes, como solución alternativa hasta las variables nativas de Shadow DOM y CSS (para cambios dinámicos de estilo global) estén ampliamente disponibles.
No, Shadow DOM y Virtual DOM no están relacionados, aunque tienen un nombre similar:
DOM virtual: Reaccionar al concepto de mantener dos copias del DOM (el original y el actualizado) por motivos diferenciales. Antes de renderizar, React diferencia los dos objetos para determinar si debe aplicar una actualización (es) al árbol DOM real. Esto da como resultado un rendimiento mejorado, ya que solo estamos actualizando las partes de la vista que lo requieren, no la pantalla completa.
Shadow DOM: parte de la especificación de componentes web propuesta por W3C, que básicamente permite la encapsulación de elementos DOM más pequeños y estilos CSS en un solo elemento DOM:
Ejemplo de elemento Shadow DOM
<video width="300" height="150" />Sin embargo, en
<video>realidad encapsula los siguientes elementos:<div> <input type="button" style="color: blue;">Play <input type="button" style="color: red;">Pause <source src="myVideo.mp4"> </div>Entonces, al usar Shadow DOM, podemos ocultar los detalles de implementación de nuestro elemento web y solo pasar la información necesaria a los subelementos (es decir
height,width), que, tal vez de manera confusa, se asemeja mucho al lenguaje ReactJS de pasarpropsa componentes .Información proporcionada a través de :
fuente
<video>), pero no hay expectativa de una ganancia de rendimiento.