vlambda博客
学习文章列表

虚拟dom深入理解 | vue


【什么是Virtual DOM】


Virtual DOM(虚拟DOM),在形态上表现为一个能够描述DOM结构及其属性信息的普通的JS对象,因为不是真实的DOM对象,所以叫虚拟DOM。

<div></div>
{ sel: 'div', data: {}, chidren:undefined, elm:undefined, key:undefined,}

Virtual DOM 本质上JS和DOM之间的一个映射缓存。可以类比 CPU 和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存:既然 DOM 这么慢,我们就在它们 JS 和 DOM 之间加个缓存。CPU(JS)只操作内存(Virtual DOM),最后的时候再把变更写入硬盘(DOM)。


【为什么需要Virtual DOM】


  • 手动操作DOM比较麻烦,还需要考虑浏览器兼容性问题,虽然有jquery等库简化DOM操作,但是随着项目的复杂DOM操作复杂提升。

  • 为了简化DOM的复杂操作于是出现了MVVM框架,MVVM框架解决了视图和状态的同步问题。

  • 为了简化视图的操作我们可以使用模板引擎,但是模板引擎没有解决跟踪状态变化的问题,于是Virtual DOM出现了。

  • Virtual DOM的好处是当状态改变时不需要立即更新DOM,只需要创建一个虚拟树来描述DOM,Virtual DOM内部将弄清除如何有效(diff)的更新DOM。

  • 虚拟DOM可以维护程序的状态,跟踪上一次的状态,通过比较前后两次状态的差异更新真实DOM。


【Virtual DOM的作用】


1、减少对真实DOM的操作

真实DOM 因为浏览器厂商需要实现众多的规范(各种 HTML5 属性、DOM事件),即使创建一个空的 div 也要付出昂贵的代价。如以下代码,打印空的div属性一共298个。而这仅仅是第一层。真正的 DOM 元素非常庞大。直接操作DOM可能会导致频繁的回流和重绘。

const div = document.createElement('div');const arr = [];for(key in div){arr.push(key)};console.log(arr.length); // 298

对复杂的文档DOM结构(复杂视图情况下提升渲染性能),提供一种方便的工具,进行最小化地DOM操作。既然我们可以用JS对象表示DOM结构,那么当数据状态发生变化而需要改变DOM结构时,我们先通过JS对象表示的虚拟DOM计算出实际DOM需要做的最小变动(Virtual DOM会使用diff算法计算出如果有效的更新dom,只更新状态改变的DOM),然后再操作实际DOM,从而避免了粗放式的DOM操作带来的性能问题,减少对真实DOM的操作。


2、无需手动操作 DOM,维护视图和状态的关系

我们不再需要手动去操作 DOM,只需要写好 View-Model 的代码逻辑,MVVM框架会根据虚拟 DOM 和 数据双向绑定,帮我们以可预期的方式更新视图,极大提高我们的开发效率。


3、跨平台

虚拟DOM是对真实的渲染内容的一层抽象,是真实DOM的描述,因此,它可以实现“一次编码,多端运行”,可以实现SSR(Nuxt.js/Next.js)、原生应用(Weex/React Native)、小程序(mpvue/uni-app)等。


【Virtual DOM有什么不足】


上面我们也说到了在复杂视图情况下提升渲染性能。虽然虚拟 DOM + 合理的优化,足以应对绝大部分应用的性能需求,但在一些性能要求极高的应用中虚拟DOM 无法进行针对性的极致优化。首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢。


下方是尤大自己的见解。www.zhihu.com/question/31…