虚拟dom的目的是为了减少前端应用对真实dom节点的操作,它是真实dom的一层映射,将真实dom转换成了js对象的形式存储在内存中,当dom需要发生变化时,只需要修改虚拟dom的内存数据,然后通过diff算法将改变的地方局部渲染到真实dom上,并不会引起真实dom的全部渲染。
key的作用:为了减少复杂度,diff算法在进行计算的时候仅仅是对同级元素之间进行对比,因此复杂度为n。而key的作用就是给同级之间的兄弟元素添加一个唯一的 标识,使得每一个兄弟节点都是唯一的,当数据发生变化的时候,就会通过diff算法并根据key的标识,针对性的改变需要改变的节点,使得每一次改变都不会影响到其他节点的变化。大大提高了更新虚拟dom的效率。另一方面还会防止出现的一些错误。比如。。。
虚拟dom ===> js内存对象、即内存数据
浏览器渲染的流程:
1、内存中构建虚拟dom树(js对象);
2、将内存中的虚拟dom映射成真实dom(html);
当数据改变之后:
1、将之前的虚拟dom树结合新的数据生成新的虚拟dom树;
2、将新生成的虚拟dom树和上一次的虚拟dom树进行对比(diff算法);
3、将对比出来的差异进行重新渲染;
可以看出,当数据发生变化的时候,虚拟dom的存在将大量的真是dom操作变成了内存数据的操作,只是在内存数据比对完成之后最后进行一次性的渲染。因为对内存数据的操作效率是远远高于对真实dom的操作效率的,所以虚拟dom提升了性能。