¿Por qué el DOM virtual de React es mucho más rápido que el DOM real?

React utiliza esta representación intermedia (que llaman “DOM virtual”) para que puedan diferenciar los cambios entre diferentes estados y realizar cambios en una cantidad mínima de nodos DOM del navegador.

La pregunta se convierte en ” ¿Por qué el DOM del navegador es tan lento, que toda esa sobrecarga con el DOM y las diferencias virtuales es aún más rápida? ”

El problema es que el DOM está hinchado . Cada vez que toca un nodo solo para leer un atributo o un nombre de clase, o para llegar a un hijo o hermano, el navegador tiene que buscar, verificar y analizar un número bastante grande de propiedades y valores para cada nodo. Los navegadores modernos son espectacularmente rápidos y eficientes para hacerlo, pero surgen problemas cuando intenta manipular una gran cantidad de nodos.

Una parte de la hinchazón DOM es heredada, pero cada vez más HTML5 contribuye más al problema de hinchazón con nuevas API y propiedades, y solo va a empeorar. Todas las nuevas funciones brillantes tienen un costo, y los desarrolladores web parecen ignorar este costo.

Es mi opinión que React es un truco y disfraza el problema real que es la hinchazón DOM del navegador. Por otro lado, algunos desarrolladores de Javascript siempre han sido conscientes de este problema y han tratado de limitar las actualizaciones a los nodos DOM y han utilizado la delegación de eventos para acelerar sus aplicaciones web. React solo hace esto a través de la automatización a expensas de algo de memoria y análisis de gastos generales. Un desarrollador necesita evaluar si los beneficios de usar algo como React superan su costo.

Como muchos otros ya habían dicho, la principal ganancia de rendimiento es la optimización del número eventual de cambios antes de actualizar y renderizar el DOM.

Básicamente, intenta minimizar la necesidad de rediseñar y volver a pintar el árbol DOM, que puede ser costoso.

U puede hacer eso con un DOM virtual porque los cambios no desencadenarán una nueva representación hasta que se haya hecho “todo”. Entonces solo necesita cambiar el diseño en el estado final en lugar de en cada cambio.

Dicho esto, el equipo de Polymerjs también está trabajando en lo que llamaron lit-html [1]. Esencialmente, en lugar de construir un DOM virtual completo, hicieron uso de literales de cadena ES6, que evitan la necesidad de atravesar un árbol DOM (incluso cuando es virtual).

Todavía no se han realizado muchos puntos de referencia o estudios detallados, pero la idea es en lugar de construir hacks para sortear algunos defectos, #usetheplatform.

Google puede hacer eso porque pueden agregar lo que quieran en Chrome y “forzar” a otros navegadores a seguir.

Pero creo que aún debemos aprovechar eso. Muchas cosas que antes requerían una lib, se han transitado al navegador.

document.querySelector (‘# someid’)

es un buen ejemplo de jQuery “piratea” convertirse en DOM API nativa.

Los navegadores son cada vez mejores, ¡no puedo esperar el día en que el mundo abandone IE por completo!

Notas al pie

[1] PolymerLabs / lit-html

El DOM virtual de React se compone de objetos JavaScript simples, que imitan elementos DOM reales. En consecuencia, actualizar el DOM virtual solo significa modificar estos simples objetos JavaScript. Una operación tan básica es algo que los motores de JavaScript pueden realizar muy rápidamente. La actualización del DOM OTOH real puede hacer que el navegador realice un trabajo computacional. En particular, escribir en el DOM y luego leerlo puede obligar al navegador a rediseñar, lo que puede ser costoso.

Cabe señalar que cuando el DOM virtual se vuelve lo suficientemente grande, actualizarlo también puede ser costoso. Esta es la razón por la cual React proporciona shouldComponentUpdate como un medio para controlar qué elementos DOM virtuales deben actualizarse.

Reaccionar es rápido porque solo manipula el DOM tanto como sea necesario. Digamos que tenemos algún tipo de botón en nuestro sitio web que cambia a un color diferente cuando un usuario hace clic en él (recuerde, estamos hablando de interfaces de usuario cuando se trata de Reaccionar). En lugar de reconstruir todas las partes del árbol DOM, React mostrará solo lo que ha cambiado entre estas dos representaciones. Desde el punto de vista del rendimiento, eso es lo que lo hace tan rápido. Actualizar los cambios es mucho más rápido que reconstruir todo el árbol DOM desde cero. Es capaz de hacer esto porque mantiene la representación DOM virtual de la última vez que actualizamos o procesamos nuestro componente en la memoria. Luego compara las dos versiones y actualiza los cambios.

Los desarrolladores web también adoran React, porque está basado en componentes. Podemos construir una pieza de una interfaz de usuario y probarla. Cuando estamos seguros de que funciona, podemos usarlo en múltiples aplicaciones web y compartirlo con otros. Más información sobre eso aquí y cómo funciona React si desea obtener más información.

El DOM virtual de React es básicamente un objeto Javascript, y REACT hace todo lo posible para cambiar solo el DOM real cuando sea necesario.

Los cambios en el DOM real deben reflejarse (es decir, representarse) en la pantalla. El costo de rendimiento adicional proviene de esa representación y de todo lo que está involucrado en ella: volver a calcular lo que debe representarse y cómo, incluida la forma en que estos cambios afectan qué propiedades CSS se aplican, las nuevas posiciones de todo en la pantalla, lo que se superpone, etc.

React Virtual DOM es un objeto,

cuando creamos un navegador de páginas web, creamos dom de forma de árbol. Para encontrar los cambios en dos árboles diferentes, la complejidad del tiempo es O (n ^ 3), pero el algoritmo REACT DIFF puede hacerlo en el tiempo O (n) utilizando las teclas de cada nodo. por eso reaccionar es más rápido

Bueno, en general, crear / actualizar nodos DOM es costoso. Al mantener una representación interna de la IU, es decir, el DOM virtual, evita hacer esto. Entonces, la mayoría de las veces, las operaciones de React son más rápidas.

Esta es una pregunta que podría responderse fácilmente utilizando su pregunta como una búsqueda en Google o leyendo la documentación de React.

Además, si realmente desea ser un desarrollador, puede escribir una serie de operaciones DOM, su equivalente usando React DOM, y luego compararlas usando las herramientas de creación de perfiles proporcionadas por Chrome (herramientas de desarrollo).

Si compara específicamente Virtual DOM y DOM, entonces diría que es porque Virtual DOM tiene un subconjunto muy específico para actualizar en caso de cambios. Además, puede haber una cantidad muy reducida de funcionalidad que ocurre en Virtual DOM. Esto le da una ventaja a Virtual DOM.

Ahora, React tiene que actualizar el DOM y asegurarse de que estén sincronizados. En realidad, eso lo devuelve al mismo nivel de trato con DOM.

React utiliza un DOM virtual para ejecutar un diff contra el DOM real cuando cambian los accesorios. Esto permite reaccionar para volver a renderizar solo las cosas que cambian, lo que lleva a grandes aumentos en el rendimiento de representación.

El DOM virtual de React es básicamente un objeto JS y la razón por la que es rápido es porque leer / escribir en un DOM real es costoso, pero leer / escribir en un objeto no lo es. Por lo tanto, la lectura / escritura de cualquier acción / evento se realiza en DOM virtual y cuando se realizan cambios en DOM virtual, simplemente cambia el DOM real.

Espero eso ayude.

Lea este artículo y espero que aclare sus dudas.

https://hashnode.com/post/the-on …

Esto se debe a que no se trata de una verificación sucia. Solo necesita saber qué necesita actualizarse y no necesita saber si sus datos han cambiado o no.