Vue Virtual Dom 和 Diff 原理
一、虚拟dom
想要理解虚拟dom首先要知道什么是虚拟dom?
虚拟dom
可以简单的用一句话概括,就是用普通的js对象
来描述DOM
结构,因为不是真实DOM
,所以称之为虚拟DOM
。
虚拟dom
是相对于浏览器所渲染出来的真实dom
而言的,在react
,vue
等技术出现之前,我们要改变页面展示的内容,只能通过遍历查询dom
树的方式,找到需要修改的dom
,然后修改样式行为或者结构,来达到更新视图的目的。
为什么要用虚拟DOM来描述真实的DOM呢?
创建真实DOM
成本比较高,如果用就js
对象来描述一个dom
节点,成本比较低,另外我们在频繁操作dom
是一种比较大的开销。所以建议用虚拟dom
来描述真实dom
。
Diff算法
diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。
思考
你觉得虚拟DOM
的性能一定高于常规DOM
吗?答案是不一定,虚拟DOM
和Diff
算法的出现是为了解决由命令式编程转变为函数式编程、数据驱动后所带来的性能问题的。换句话说,直接操作DOM
的性能并不会低于虚拟DOM
和Diff
算法,甚至还会优于。
你觉得使用了虚拟DOM
就真的不操作dom
元素了吗?其实不是的,只是减少用户操作dom
,虚拟DOM
在渲染的时候其实还是会操作dom
的