DOM virtual y algoritmo de diferencias

1. La diferencia entre DOM virtual y DOM real

1. El DOM virtual no realizará operaciones de composición tipográfica y redibujado. El DOM virtual es para convertir el DOM real en código Javascript (actualice el dom virtual, la página no cambiará, actualice el dom real, la página se actualizará)
2. Realice modificaciones frecuentes en el DOM virtual, luego compare y modifique las partes que deben cambiarse en el DOM real al mismo tiempo (¡atención!) y, finalmente, realice la composición tipográfica y el redibujado en el DOM real para reducir la pérdida de demasiados nodos DOM. composición tipográfica y redibujado
3. La eficiencia de la composición tipográfica y el redibujado frecuentes del DOM real es bastante baja
4. Virtual DOM reduce efectivamente el redibujado y la composición tipográfica de áreas grandes (nodos DOM reales) , porque al final es diferente del DOM real y solo puede representar partes
5. Cálculo de pérdida utilizando DOM virtual:
   pérdida total = adiciones, eliminaciones y modificaciones de DOM virtuales + (relacionado con la eficiencia del algoritmo Diff) adiciones, eliminaciones y modificaciones de diferencias de DOM reales + (menos nodos) composición tipográfica y redibujado
6. Utilice directamente el cálculo de pérdida del DOM real: pérdida total = adiciones, eliminaciones y modificaciones completas del DOM real + (posiblemente más nodos) composición tipográfica y redibujado

Resumen: para reducir los problemas de rendimiento causados ​​por el rediseño frecuente de áreas grandes, los diferentes marcos no necesariamente necesitan DOM virtual. La clave es si el marco causará operaciones DOM de área grande con frecuencia.

2. algoritmo diferencial

resumir primero

• La esencia del algoritmo diff es encontrar la diferencia entre dos objetos.
• El núcleo del algoritmo diff es la comparación de matrices de nodos secundarios, la idea es comparar los dos extremos del primer y último extremo
• La función principal de la clave es
  determinar si el nodo se puede reutilizar y
  establecer un índice de índice de clave, que es principalmente para reemplazar el recorrido y mejorar el rendimiento.

El papel del algoritmo diff

Representar el DOM real es costoso, a veces modificamos ciertos datos y los representamos directamente en el DOM real, lo que hará que todo el árbol DOM se vuelva a dibujar y reorganizar. Queremos actualizar solo la pequeña parte del dom que modificamos, no todo el dom, y el algoritmo diff nos ayuda a lograrlo.
La esencia del algoritmo diff es encontrar la diferencia entre dos objetos, con el objetivo de lograr la reutilización de nodos tanto como sea posible.
El objeto mencionado aquí en realidad se refiere al dom virtual (árbol de dom virtual) en vue, es decir, el objeto js se usa para representar la estructura dom en la página.