Skip to main content

虚拟dom & diff算法

· 2 min read
Lvxl

diff算法 本质就是找不同,相同的地方不用管了

虚拟dom​

虚拟dom 本质上就是一个对象,该对象描述了一个ui节点所对应的一些必要信息

真实dom:

<div class="lvxl"> hello </div>

虚拟dom:

const virtualNode = {
    type: 'div',
    content: 'hello',
    props: {
        class: 'lvxl'
    }
}

那么,我们为什么需要虚拟dom?

因为真实dom在创建时自身会携带非常多的属性, 我们知道最终我要进行diff的时候是需要本体和参照物的, 实现的方式也是将dom上的属性递归对比, 属性越多性能开销越大

优缺点 真实dom:

  • 效率低，解析速度慢，内存占用量过高
  • 性能差：频繁操作真实DOM，易于导致重绘与回流

虚拟dom:

  • 简单方便：如果使用手动操作真实DOM来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难
  • 性能方面：使用Virtual DOM，能够有效避免真实DOM数频繁更新，减少多次引起重绘与回流，提高性能
  • 跨平台：React借助虚拟DOM， 带来了跨平台的能力，一套代码多端运行
  • 在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
  • 首次渲染大量DOM时，由于多了一层虚拟DOM的计算，速度比正常稍慢