概念:虚拟dom相当于在js和真实的dom中间加了一个缓存,利用dom 的diff算法避免了没有必要的dom操作,从而提高了性能。
为什么一定要用虚拟dom?
你用传统的原生api或jquery去操作dom时,浏览器会从构建dom树开始,从头到尾执行一遍流程。
真实dom的执行流程:用js对象表示真实的dom结构,当状态发生变化的时候,会重新创建一个虚拟dom树的结构,然后用新的树和旧的树进行比较,记录两颗树的差异,把所记录的差异应用到所构建的真实的dom树上,视图就更新了。
概括来说:模板——>渲染函数——>虚拟dom树——>真实dom。
举例说明渲染过程?
当你一次需要更新10个dom节点,浏览器没有这么智能,它会在接收到第一个dom节点之后,并不知道后续还有九次更新的操作,因此会马上执行流程,因此会马上执行流程,最终执行10次流程。
而通过vnode,同样更新10个dom节点,虚拟dom不会立即进行操作,而是将这10次更新的diff内容保存到本地的一个js对象上,最终将这个js对象一次性的attach到dom树上,避免了大量的无谓的操作。
很多人认为虚拟dom最大的优势是diff算法,减少了javascript操作真实dom的带来的性能的消耗。虽然这是虚拟dom带来的优势,但是这不是全部的优势,虚拟dom最大的优势在于抽象了原本的渲染过程,实现了跨平台的能力,而不仅仅局限于浏览器的dom,可以是安卓和ios的原生组件,可以是近期很火热的小程序,也可以是各种GUI。
vue的虚拟dom是怎样的执行流程?
vue.js是通过编译将模板渲染成函数,执行函数可以得到一个虚拟节点。在对dom进行操作的时候,会触发对应的dep中的watcher对象。wacther对象会调用对应的update来修改视图。
虚拟dom实现的原理三部分?
用javascript对象模拟真实的dom树,对dom进行抽象。
diff算法——比较两个虚拟dom树的差异
pach算法——将两个虚拟dom对象的差异更新到真实的dom树。(pathc也叫patching,算法,这个过程是对比新旧虚拟节点之间有哪些不同,然后根据对比结果,找出需要更新的节点进行更新。)
虚拟dom的好处?
降低浏览器的性能的消耗:javascript的运行速度远大于dom操作的执行速度,因此,运行patching算法来计算出真正的需要更新的节点,最大限度地减少了dom操作。
减少回流和重绘:通过diff算法,减少回流和重塑,通过diff算法优化遍历,对真实的dom进行打补丁式的新增、修改、删除、实现局部更新,减少回流和重绘等操作。用diff算法,减少了回流和重绘。
跨平台:虚拟dom本质上是js对象,相比之下虚拟dom,可以进行更方便的跨平台操作,例如浏览器的渲染、node、weex开发等。