javascript - ¿Shadow DOM es rápido como Virtual DOM en React.js?
reactjs web-component (3)
De esta prueba, Polymer sopló Reaccionar en rendimiento en Chrome:
¿La implementación de Shadow DOM en mis proyectos los hará más rápidos como el DOM virtual que usa React?
No, Shadow DOM y Virtual DOM no están relacionados, aunque de forma similar se denominan:
DOM virtual: Reaccione el concepto de mantener dos copias del DOM (el original y el actualizado) por razones diferenciales. Antes de renderizar, React diferencia los dos objetos para determinar si debe aplicar una actualización o actualizaciones 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 toda la pantalla.
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 DOM de sombra
<video width="300" height="150" />
Sin embargo,
<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, mediante el uso de Shadow DOM, podemos ocultar los detalles de implementación de nuestro elemento web, y solo transmitir la información necesaria a los subelementos (es decir,
height
,
width
), lo que, tal vez de manera confusa, se parece mucho al lenguaje de ReactJS de pasar
props
a componentes.
Información proporcionada a través de :
DOM virtual
El DOM virtual se trata de evitar cambios innecesarios en el DOM, que son costosos en términos de rendimiento, porque los cambios en el DOM generalmente causan 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 nueva representación, sino que la nueva representación solo ocurre una vez después de que se haya aplicado un conjunto de cambios al DOM.
Shadow DOM
Shadow dom se trata principalmente de la encapsulación de la implementación.
Un único 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>
pero también se pueden implementar componentes más simples reutilizables y componibles como elementos personalizados donde se oculta la representación interna en la sombra DOM como
<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 un alcance de ese componente y se evita el desagüe 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 de sombra de un elemento personalizado) que puede limitar la representación en el área de dicho componente, en lugar de volver a representar toda la página
Esta es la razón por la que los combinadores CSS
>>>
,
/deep/
y
::shadow
CSS, que permitieron aplicar estilos a través de los límites DOM de la sombra, quedaron en desuso y están sujetos a ser eliminados pronto de Chrome (otros navegadores nunca los tuvieron AFAIK).
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 los enlaces y
*ngFor
directivas estructurales como
*ngFor
,
*ngIf
, ... actualice el DOM.
Por lo tanto, el DOM solo se actualiza cuando el modelo realmente cambió.
Angular2 usa shadow DOM (solo con
ViewEncapsulation.Native
que actualmente no es el predeterminado) para utilizar las capacidades de encapsulación de estilo proporcionadas por el navegador, o (valor predeterminado actual) simplemente emula la encapsulación de estilo reescribiendo estilos agregados a los componentes, como una solución alternativa hasta el DOM sombra nativo y las variables CSS (para cambios dinámicos de estilo global) están ampliamente disponibles.