Dom virtual
Las operaciones de dom frecuentes y complejas suelen ser el origen de los cuellos de botella de rendimiento front-end, Vue proporciona una solución para dom virtual
La idea central del DOM virtual es: proporcionar una herramienta conveniente para la compleja estructura DOM del documento, para minimizar la operación DOM. Esta oración puede ser demasiado abstracta, pero básicamente resume las ideas de diseño del DOM virtual
(1) Proporcionar una herramienta conveniente para garantizar la eficiencia del desarrollo
(2) Minimizar la operación DOM y garantizar la eficiencia de ejecución
Es decir, el marco / herramientas de dom virtual hacen esto:
- De acuerdo con el árbol dom virtual, inicialmente se convierte en un dom real
- Cuando los datos cambian, o cuando la página necesita ser renderizada nuevamente, se regenerará un nuevo dom virtual completo
- Compare el nuevo dom virtual con el antiguo dom virtual (usando el algoritmo diff). Después de obtener el lugar que necesita ser actualizado, actualice el contenido
De esta forma, puede reducir en gran medida el funcionamiento del dom real y mejorar el rendimiento.
Ejemplos:
<body>
<div id="content">
<p>{{ 1+1}}</p>
<ul class="list-group">
</ul>
</div>
<div id="myp">1</div>
<script src="./base/vue.js"></script>
<script>
//执行10000次代码 0.3ms
let myp = document.getElementById("myp")
let num = 1
console.time("temp")
for(var i=0;i<10000;i++){
num++
}
myp.innerHTML = num
console.timeEnd("temp")
//执行10000次代码 35ms
console.time("temp")
for(var i=0;i<10000;i++){
let num = myp.innerHTML*1
myp.innerHTML = ++num
}
console.timeEnd("temp")
</script>
</body>
Efecto: ¡Después de
ejecutar, descubrirá que el primer algoritmo toma más de cien veces más rápido que el segundo algoritmo! ! ¿Por qué es esto? Esto se debe a que el primer algoritmo opera en el dom virtual en memoria ( dom virtual es en realidad un objeto de tipo memoria (objeto de memoria js) que pertenece a una capa de mapeo de dom real de datos de memoria) , y luego realiza operaciones en el dom virtual Cuando se procesa en la página, el segundo tipo es operar el dom real, por lo que el rendimiento consumido en el segundo es mucho más que el primero, y naturalmente es más lento que el primero.
No entiendo Tomemos otro ejemplo.
<body>
<div id="content">
<p>{{ 1+1}}</p>
<ul class="list-group">
</ul>
</div>
<div id="myp">1</div>
<script src="./base/vue.js"></script>
<script>
//在vue内部的话，其实有虚拟dom
var data = {
arr:[]
}
//1.在渲染之前内存中会首先生成一颗虚拟dom树
var vDom = {
tag:"div",
attr:{
id:"content"
},
children:[
{tag:"p",content:2},
{tag:"ul",attrs:{className:"list-group"}}
]
}
//2.将内存中的虚拟dom树初始化渲染成真实dom树
//3.当我们修改data里面的数据的时候
data.arr.push("<li>111111</li>")
data.arr.push("<li>222222</li>")
//4.将之前的虚拟dom树结合新的数据生成一颗新的虚拟dom树
var newDom = {
tag:"div",
attr:{
id:"content"
},
children:[
{tag:"p",content:2},
{tag:"ul",attrs:{className:"list-group"},children:[
{tag:"li",content:"11111"},
{tag:"li",content:"22222"}
]}
]
}
//5.将此次生成好的新的虚拟dom树与上一次的虚拟dom树结构进行对比，对比差异（diff算法）
//6.将对比出来的差异的部分进行重新真实dom结构的渲染
</script>
</script>
¿Qué es dom virtual? Relación con el valor clave?
Virual DOM registra una copia de un nodo dom con un objeto JS. Cuando el dom cambia, primero use el
dom virtual para realizar diff, calcule la diferencia mínima y luego modifique el dom real.
- Al manipular el DOM de la manera tradicional, el navegador ejecutará el proceso desde el principio hasta el final de la construcción del árbol DOM, lo cual es muy ineficiente. El DOM virtual está representado por objetos javascript y el funcionamiento de javascript es muy simple y eficiente. Existe una capa de mapeo entre DOM virtual y DOM real. Muchos lugares que necesitan operar DOM operarán DOM virtual y finalmente actualizarán DOM de manera uniforme. Para que pueda mejorar el rendimiento
Diferente algoritmo de DOM virtual
En el DOM virtual, cuando el estado del DOM cambia, el DOM virtual realizará una operación Diff para actualizar el DOM que solo necesita ser reemplazado, en lugar de volver a dibujar todo.
En el algoritmo Diff, solo los nodos de los dos árboles DOM antes y después de la comparación son planos, y no se realiza un recorrido de profundidad.
1. Si se cambia el tipo de nodo, el nodo antiguo se desinstala directamente y se reemplaza por un nuevo nodo. El nodo antiguo, incluidos los siguientes nodos secundarios, se desinstalará. Si el nuevo nodo y el nodo antiguo son solo de diferentes tipos, pero todos los nodos siguientes son iguales Este es también un lugar donde la eficiencia no es alta.
2. El tipo de nodo no cambia, el atributo o el valor del atributo cambia, el nodo no se desinstalará y se realizará la operación de actualización del nodo.
3. Cambie el texto, modifique directamente el contenido del texto.
4. Al mover, agregar o eliminar nodos secundarios:
Si desea insertar el nodo F en el medio, el enfoque simple y crudo es: descargar C, cargar F, descargar D, cargar C, descargar E, cargar D, cargar E. Como se muestra a continuación:
Al escribir código, si no define una clave para el tipo de matriz o enumeración, se utilizará el algoritmo de fuerza bruta anterior.
Si agrega una clave a un elemento, Vue puede encontrar directamente una ubicación específica para operar de acuerdo con la clave, y la eficiencia es relativamente alta. Como se muestra a continuación:
Esto busca el principio de que el mismo valor clave puede ser reutilizado.
Proporcionar la clave en v-for puede mejorar el rendimiento por un lado y evitar errores por un lado
