Cómo React.js acelera la representación con un DOM virtual

Citando este ( https://news.ycombinator.com/item?id=9155564 ) artículo

La respuesta corta es que el DOM no es lento. Agregar y eliminar un nodo DOM es un intercambio de punteros, no mucho más que establecer una propiedad en el objeto JS.

¿Son los cuellos de botella DOM solo las cosas que causan un redibujado? De ser así, ¿no debería uno hacer que la amortización DOM virtual de React tenga el mismo rendimiento que volver a dibujar un componente completo (por supuesto, en una llamada de API de navegador)? Yo pensaría que los algoritmos ejecutados por el navegador solo intentan redibujar el diff de un estado a otro (¿como git quizás?). Que implica que el navegador mantiene un DOM virtual por sí mismo. Entonces, ¿qué sentido tiene tener un DOM virtual?

¿También debería agregar un elemento que tiene la propiedad de estilo de display establecida en none no afecte negativamente al rendimiento? Me gustaría hacer un perfil de esto yo mismo, pero no sé exactamente a dónde recurrir ya que comencé a progtwigr Javascript solo recientemente.

Esta pregunta puede ser algo amplia para SO, pero como respuesta general, algunas otras citas del mismo artículo también son muy relevantes:

Sin embargo, el diseño es lento …
[…]
Peor aún, el diseño se desencadena de forma síncrona accediendo a ciertas propiedades …
[…]
Debido a esto, una gran cantidad de código Angular y JQuery es estúpidamente lento
[…]
Reaccionar no ayuda a acelerar el diseño …

El DOM virtual de react, lo hace, calcula las diferencias entre un estado del DOM y el estado siguiente y minimiza las actualizaciones DOM de una manera muy inteligente .

Asi que:

  • DOM en sí mismo no es lento
  • pero el diseño es lento
  • y casi todas las actualizaciones DOM requieren actualizaciones de diseño
  • así que menos actualizaciones de DOM son más rápidas

Y el motor de reacción hace exactamente eso (al igual que muchas otras herramientas / bibliotecas con un DOM virtual).

Más información sobre qué DOM virtual es y sus ventajas, por ejemplo, aquí .


P: “¿Son los cuellos de botella de DOM solo esas cosas que causan un redibujado?”


R: El redibujado depende de la GPU. No tiene nada que ver con la velocidad de las actualizaciones DOM. Las actualizaciones DOM son casi instantáneas. Todo depende de los cambios que afectan el flujo de documentos. Si un cierto cambio DOM o DHTML afecta el flujo de documentos. Cuanto más cerca esté el elemento afectado de la raíz del elemento del documento, mayor será el impacto sobre el reflujo del documento.

No necesita cambiar el contenido DOM para provocar un reflujo del documento. Un cambio de propiedad de estilo simple en un parámetro dado puede empujar a los elementos de la secuencia para cambiar de posición y causar, por lo tanto, forzar el reflujo del documento.

Por lo tanto, no, los cambios de DOM en Elementos de tamaño fijo no provocarán un reflujo del documento, mientras que la actualización de la pantalla es prácticamente instantánea. Se aplicará solo en el área localmente afectada, la mayor parte del tiempo en un cuadro que puede tener menos de 300 x 200 píxeles cuadrados; un tamaño de un área que se puede volver a dibujar con más de 120 fps en una GPU realmente lenta. Pero eso es 5 veces más suave que ver a Avengers en el cine.

(Cualquier cambio espacialmente no equivalente en el contenido alineado fluir causará un reflujo. Por lo tanto, debemos vigilar los cambios que afectan el tamaño y la posición de nuestros elementos flotantes, los cambios en los elementos en línea dentro de una secuencia larga de otro elemento en línea, etc., etc. )


P: “¿debería agregar mal un elemento que tiene la propiedad de estilo de visualización configurada a ninguna afectando el rendimiento?”


A: Eso es correcto. Agregar un elemento con style.display: “none” en el DOM no causará ningún cambio en el renderizado existente del documento, y por lo tanto, no activará un reflujo del documento y, naturalmente, no tendrá ningún impacto; es decir: será tan rápido como agregar una nueva propiedad a un objeto de JavaScript.

Saludos.