如果让我们自己开发一个视图框架
state 数据
render 模版
数据 + 模版 = 生成 DOM 结构 (Modle + View = DOM)
当数据更新了, 生成新的 DOM 结构
然后新 DOM 结构 替换老的 DOM 结构 (特别消耗性能)
将处理升级:
state 数据
render 模版
数据 + 模版 = 生成 DOM 结构 (Modle + View = DOM)
当数据更新, 生成新的 DOM 结构
比较新旧 DOM 结构差异 (input 数据更新了)(DOM 结构的比较 diff 也很消耗性能)
然后将差异部分 替换成新的 DOM 结构
上面的方法虽然改进了, 不直接替换 DOM 少消耗性能了, 但是新旧 DOM 结构的比较也很消耗性能.
再次升级为虚拟 DOM 的处理:
state 数据
render 模版
数据 + 模版 = 生成 DOM 结构 (Modle + View = DOM)
同时 生成 虚拟 DOM 结构 (虽然生成虚拟 DOM 结构也消耗性能, 但是用 JS 生成一个 JS 对象跟生成 DOM 结构相比, 还是节省性能的)
当数据更新了, 生产新的虚拟 DOM 结构 (也很快)
然后新旧虚拟 DOM 结构进行差异比较 (两个 JS 对象或者数据比较 性能比 两个 DOM 结构比较高的多)
然后将差异部分进行替换
其实虚拟 DOM 就是 一个大的 JS 对象或者数组. 用 JS 生成一个 JS 对或者, 进行两个对象的比较. 要比生成一个 DOM 对象, 进行两个 DOM 结构的比较性能要好的多 .
来源: http://www.jianshu.com/p/d73893d104f2