虚拟dom_虚拟DOM发展的前世与今身

web这几年蓬勃发展。经历了几个比较大的转变。我们先来大概回顾一下。

Jquery

在虚拟Dom被提出来之前，我们前端框架Jquery凭借着良好的兼容性和简单易用的特性征服了大量的前端开发者，从而统治着大量的网站UI界面的Dom操作，jquery一度成为了神一般的框架存在着。从而广大的前端人被后台程序员所鄙视。认为jquery就等同于前端……前端一度处于程序员的最底层……

然而随着移动互联网的不断发展。UI界面越来越复杂。用户对于UI界面的要求也越来越高。jquery这时候显得有些力不从心。直到09年，google推出了自家的框架angularjs1.0(ng是被google收购而来)版本。首次提出了前端的MVC概念。一时间在前端火了起来。

angularjs

用习惯了jquery的前端开发者，突然用上了angularjs，是相当不适应的。angularjs提出的一些概念相当的前卫，比如MVC、$scope依赖注入、服务、指令、双向数据绑定、模块等新名词一捅而上。入门之后，我们知道了这个框架将开发者的精力由之前的dom直接转向了具体的业务层面上，虽说angulajs踩坑不断，但是其数据驱动UI的思想一时大火，我们前端人也可以骄傲的对后台说，我们也有MVC。可以说angularjs是前端开发的里程碑。

Vue & React

时间飞逝，时间来到了14年。脸书内部的一个项目的诞生。Reactjs横空出世。虚拟Dom被首次提出并且采用了与NG完全不同的思想：单向数据流，随着Nodejs，babel,ES6日渐成熟，jsx一度成为开发者的新宠儿。Vue作为后起之秀，吸收了两位前辈的思想：虚拟Dom、双向数据绑定于一身，使得Vue成为了国内最火热的前端框架。

Vue双向数据绑定我已经在之前的文章 Vue2.x 与Vue3.x 双向数据绑定区别 中提到过。今天着重就是说说这个今天的主题：虚拟Dom

虚拟DOM

先来思考一个问题：为什么会出现虚拟的Dom，前面我说到，随着web2.0不断衍变，用户对于UI界面的口味越来越挑剔。而传统的dom操作的代价十分昂贵。使得用户对于界面的交互体验越来越差。从而才有了优化的手段。

而虚拟DOM不会立即操作DOM，而是将N次更新的diff内容保存到本地一个JSON对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无用的计算量。所以我们用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，再由浏览器去渲染。

那虚拟dom这么神秘，它究竟是什么呢？其实很容易理解。大家想下，人家Vue也好，react也罢，为什么要定义一些.vue的文件或者.jsx的文件呢。其实结果应该很明显。就是在render生成真实的dom之前。先形成一份虚拟的dom结构出来。这个dom结构就是存在于我们的内存当中的一个JSON对象。这个json对象就是我们的虚拟的dom。

我们先来构建一个简单的虚拟Dom类。

那么这个虚拟的Dom有什么优缺点呢？

从上面的分析，我们可以看到。虚拟的dom的确可以解决浏览器的性能问题，只不过是把一些操作移到了在内存中操作，因此，虚拟的dom一定会加大内存的消耗。那么我们框架应该是加大力度去优化虚拟dom的diff算法了，节省内存。才是王道 。

Vue3.0即将推出。全部采用了typescript来重构。对性能做了较大的优化。大家可一睹新的内存优化技巧了。