虚拟DOM与diff算法

[coconilu]

概述

先来介绍一下前端的历史：

1. 最原始时代，是静态网页，那个时候几乎没有交互元素，更多是通过超链接连接一个又一个冰冷冷的网页

2. 后来有了服务器动态渲染网页，用户可以提交表单然后重新渲染网页，不过是在服务器后台渲染的，那个时代的代表作是ASP、JSP

3. 前端继续发展，有了异步请求API后，不刷新也可以和服务器交互了，操作DOM来更新网页成为了热门技术，代表作有jQuery等提供超级棒选择器语法的开源库

4. 后来发展出后端服务器类似的MVC结构，诸多的交互元素的诞生，大家越来越意识到数据模型的重要性，都渴望数据模型一变更，那么视图也要跟着变更，毕竟操作DOM虽然简单，且也繁琐

5. 不出所料，MVC架构衍生出了MVP、MVVM等高级架构，MVP打破了MVC中View原来对于Model的依赖，MVVM中通过binder把View和Model的同步逻辑自动化了。典型的代表有AngularJS还有后来的VueJS

6. 重点来了，不想操作DOM API的梦想快要可以实现了，就是React的出现。React使用Virtual DOM作为在数据模型和真实 DOM之间的缓存，既有快速响应数据模型变更，又可以自动维护和更新真实 DOM

虽然VueJS 从 2.0 开始也使用了Virtual DOM构建，但是感觉更像MVVM架构一些。VueJS是在React之后出现的，但是有后起之秀的感觉，项目社区很活跃

理解浏览器渲染原理

Virtual DOM 存在的意义

维护状态，更新视图。

状态变更->重新渲染整个视图的方式可以稍微修改一下：用 JavaScript 对象表示 DOM 信息和结构，当状态变更的时候，重新渲染这个 JavaScript 的对象结构。

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。

Virtual DOM 实现的原理

1. 构建Virtual DOM，包括Virtual Node

项目的开始，前端工程师会使用Virtual DOM的语法，把心中的网页架构构建出来

2. 连接到真实 DOM，也就是把Virtual DOM渲染成真实 DOM

这一步里，把Virtual DOM渲染出来，这个过程不需要我们书写任何HTML的结构

3. 更新Virtual DOM，然后映射到真实 DOM

数据模型变化的时候，会直接作用在Virtual DOM上，而不是真实 DOM，然后通过对比、计算两颗新旧的Virtual DOM，得到更新真实 DOM的所有操作，并开始更新网页

第三方库

1. virtual-dom

2. snabbdom

diff算法

diff算法，仅同层比较，有三种操作：新增、移动、删除。

兄弟元素强烈推荐使用key属性以提高更新效率。

另外：VueJS和React的diff算法是有区别的。

参考

深度剖析：如何实现一个 Virtual DOM 算法
界面之下：还原真实的MV*模式
一起理解 Virtual DOM
深度理解 Virtual DOM