为何虚拟DOM更优胜一筹

注意： 虚拟DOM只是实现MVVM的一种方案，或者说是视图更新的一种策略。没有虚拟DOM比MVVM更好一说。

咱们回顾传统MVC框架,如backbone,它是将某个模板编译成模板函数,须要更新时,是本身手动将数据总体传入模板函数, 获得一个字符串,使用innerHTML刷新某个容器!注意,这里其实能够优化,但因为是手动,是体力活,都是使用很粗放型的innerhTML了事 (使用jQuery的html方法性能会更差,不过好处是它处理了IE下的innerHTML BUG及全平台的没法执行内部的script标签的BUG) 因为总体替换,一会儿销毁这么多元素(有时还绑着事件,可能致使GC出问题),又要插入这么多元素,再从新绑定事件(这个可使用事件代理缓解) 所以性能很是差

方案二是使用脏检测的angular,要求对全部做用域对象进行diff,使用通知刷新函数进行视图更新. 页面上的指令越多,须要比较的数据越多(有循环, 须要乘以数组长度或对象键值对个数),可能用于循环时间过长致使页面假死

方案三使用avalon这样的密封舱方案(船底是分红一个个独立的区域,局部受损也不会致使沉船). avalon使用Object.defineProperty及VBS实现属性监控, 这样用户修数据时,就能当即进入 事件总线系统(观察者模式),而后取得与这属性相关联的订阅者数组(换言之的密封舱,不像ng那样, 一个$scope对象就一个$$watcher数组).而通常状况下,VM中的某个属性在视图中也只会用到几个位置, 那么几个位置,就会生成几个绑定对象,都放在相应的订阅者数组中,每一个订阅者数组都不会太长. 所以同步视图,不会所以遍历的数组过长而假死.所以ng在处理2000个指令的页面时就易出问题 (一个grid,每每有两三重循环,很容就飙到5000个指令),而avalon的密封舱方案是能撑到12000个指令

但avalon须要保存大量的绑定对象,而且将普通属性转换访问器属性,也须要占用内存,这是一个以空间换时间的方案. 不过avalon在处理ms-repeat, ms-with, ms-each这些循环绑定的场合, 实现得不太好。这其中要生成大量的代理VM, 整个页面都在生成销毁VM中拖慢了(即使使用各类池子进行循环再用).

方案四,像knockout那样, 使用时让用户痛苦一些,使用可同步视图的东西用函数(wrapper)包裹起来, 刷新视图,就只须要从新调用这个wrapper.如今全部新的MVVM都是从ko那里学到依赖收集. 这个wraper会通知其依赖的wrapper,经过极其痛苦晦涩的方式进入事件总线, 执行视图刷新函数. knockout是使用闭包用到极致的库,显然这样作性能也不好.

最后react, 首先使用编译手段(jsx的虚拟DOM转换), 将这部分消耗能提早释放出去, 不过将字符串(jsx模板)转换为一个个JS对象,也占不了多少内存. 而后是数据发生变更时, 因为数据变更都是须要用setState方法,所以兼容性很好, 少了Object.defineProperty或wrapper的消耗,而后对应数据经过render转换成字符串,字符串再转换虚拟DOM树 前后虚拟DOM进行比较, 更新视图.

react是面向组件设计, 一个组件就是一个密封舱, 不多会对全部虚拟DOM进行比较, 因为强制使用单向流动, 减小每次变更须要的diff. 没有绑定对象与wrapper的内存占用高的问题.

react的流行，只是ng太难用了，当ng或其余MVVM改用虚拟DOM进行视图更新，这优点就不须要！

react的问题很明显，库很是大，它基本上离开了jsx换转器就活不成。 这么大的库， 换言之你们能对它改动的地方就越多，每升一个版本就数千改动。 做为架构师的咱们，须要对其源码进行很是熟悉的了解，要不出了问题没法本身处理，每次等外国人回复就迟了。

react的复杂度，很易触发你们对它的重构，即使占有方有向前兼容的愿望，但能抵得几回诱惑呢，所以通过几个版本会面目全非。若是你坚持不变，那么其余人就会另起山头， 开源的东西很易出现一个更优点的仿品！react的实现很糟糕的，强在设计！

虚拟DOM的难点是如何将一个字符串变成一个模板函数，而后再转换为虚拟DOM。 目前没有简单的HTML parser实现，stackoverflow上说不能使用几行正则就能拆分HTML！ 所以这个高门槛，致使react的代替方案难产！github上有许多自称使用了虚拟DOM的框架，不是假的就是超垃圾的实现！更况且react支持自定义标签，所以不单是解析HTML的问题了， 须要对自定义标签进行更多的处理！

目前avalon的虚拟DOM方案也在缓慢推动中，不是我不会写parser，只是太多人问我许多avalon基础问题，严重拖慢个人速度。。。。