什么是虚拟DOM、为什么要用虚拟DOM、传统的DOM有什么缺点

4,431 阅读1分钟

什么是虚拟DOM: ⽤ JavaScript 对象表示 DOM 信息和结构,更新后使之与真实dom保持同步,同步过程就是协调,核心是diff算法。

为什么要用虚拟DOM: DOM操作很慢,轻微的操作都可能导致⻚面重新排 版,⾮常耗性能。相对于DOM对象,js对象处理起来更快, 而且更简单。通过diff算法对比新旧vdom之间的差异,可以 批量的、最⼩化的执行dom操作,从而提高性能

  • 解释:

传统dom渲染流程
这样是非常消耗性能的,因为我仅仅创建一个div就会有很多属性值,

var div = document.createElement('div')
var str = ''
for (var key in div) {
    str += ' ' + key
}
console.log(str)

why? DOM操作很慢,轻微的操作都可能导致页面重新排版,非常耗性能。相对于DOM对象,js对象 处理起来更快,而且更简单。通过diff算法对比新旧vdom之间的差异,可以批量的、最小化的执行 dom操作,从而提高性能。

与vue中的虚拟DOM有什么不同

vue中是两个数组进行比较;react是两个链表进行比较;