Antes de entender qué es DOM Diffing, debemos saber qué es DOM y cuál es su propósito. En este artículo, aprenderemos sobre las dos versiones de DOM, la Real y la Virtual, y luego cubriremos qué es la diferenciación de DOM.
Qué es un DOM: en un sentido formal, un DOM es una interfaz de programación de aplicaciones (API) para documentos. DOM define una estructura lógica para un documento y ayuda a los desarrolladores a acceder y manipular un documento. Se parece mucho a los modelos de documentos. Por ejemplo, considere la siguiente lista HTML .
HTML
<ul> <li></li> <li></li> <ol> <li></li> <li></li> </ol> </ul>
El DOM representa la lista de la siguiente manera:
Representación DOM de la lista HTML
Como podemos ver, un DOM es muy parecido a un árbol .
Ahora entendamos el concepto o Virtual DOM.
Comencemos la respuesta con por qué. Cada vez que hay un cambio en la interfaz de usuario de nuestra aplicación, el DOM se actualiza, lo que significa que se actualiza todo el árbol y luego se vuelven a representar los componentes de la interfaz de usuario. Esta representación de los elementos de la interfaz de usuario cada vez que un pequeño cambio hace que una aplicación sea lenta y, por lo tanto, cuanto más densa sea su interfaz de usuario, más lentas serán nuestras actualizaciones de DOM. Y aquí es donde entra en escena un DOM virtual. Un DOM virtual es una representación virtual de un DOM real discutido anteriormente. Ahora, cuando hay un cambio de estado en la interfaz de usuario de nuestra aplicación, solo se actualiza el DOM virtual en lugar del DOM real. Lo siguiente que debe preguntarse es cómo la actualización del DOM virtual mejora el rendimiento.
Diferenciación de DOM: cada vez que hay un cambio en el estado de los elementos de la interfaz de usuario, se crea un nuevo DOM virtual. Luego, el nuevo DOM virtual y el DOM virtual anterior se comparan entre sí. Esta comparación se llama diferenciación de DOM .
La intención es realizar operaciones mínimas en el DOM real, por lo tanto, después de la diferenciación, se calcula la mejor manera de actualizar el DOM real, lo que lleva a una actualización eficiente de la interfaz de usuario.
La siguiente imagen muestra el proceso de diferenciación:
Diferenciación de DOM
La imagen muestra que la actualización del DOM real se pospone lo más posible. El Node rojo representa el cambio de estado; luego, los cambios se calculan a través de la diferenciación de DOM y, finalmente, el nuevo DOM virtual se actualiza por lotes al DOM real.
Conclusión: actualizar la interfaz de usuario es muy costoso; actualizar el DOM real en lotes mejora el rendimiento general de volver a pintar la interfaz de usuario.