Open yuanjinger opened 6 years ago
背景：传统页面都是简单的静态页面加上一些基本的DOM操作，一般我们用JavaScript库（如JQuery来方便开发）。但随着Web应用程序越来越复杂，程序状态也越来越多，DOM操作的复杂度也在不断提升，JQuery已经不能满足我们开发的需求，于是一些MVC、MVVM框架被引入。在MVVM框架中我们可以通过数据绑定实现视图和模型的互动效果，通过双向绑定自动实现模型和视图的同步更新。但这些仅仅是从代码组织方式来降低维护复杂应用的难度，并没有从本质上减少所维护的状态，没有减少页面的DOM操作（框架替我们做了而已）。真正的DOM元素非常庞大，因为浏览器的标准把DOM设计的非常复杂，大多使用的是比较简单粗暴的插入、删除等操作，这对于比较“昂贵”的DOM，会产生一定的性能问题。
了解到DOM的一些弊端，人们就会思考对DOM进行优化的方法，于是聪明人提出了Virtual DOM的概念。本质上它是一种基于JavaScript的虚拟DOM技术，因为相对于DOM对象，JavaScript对象更简单，处理速度更快，DOM树的结构、属性等信息可以很容易地用JavaScript对象来表示。
我们通过JavaScript对象表示的树结构来构建一棵真正的DOM树，当数据状态发生变化时可以直接修改这个js对象，接着对比修改后的js对象，记录下需要对页面进行的dom操作，然后将其应用到真正的dom树，实现视图的更新。这个过程就是Virtual DOM的核心思想。
背景：传统页面都是简单的静态页面加上一些基本的DOM操作，一般我们用JavaScript库（如JQuery来方便开发）。但随着Web应用程序越来越复杂，程序状态也越来越多，DOM操作的复杂度也在不断提升，JQuery已经不能满足我们开发的需求，于是一些MVC、MVVM框架被引入。在MVVM框架中我们可以通过数据绑定实现视图和模型的互动效果，通过双向绑定自动实现模型和视图的同步更新。但这些仅仅是从代码组织方式来降低维护复杂应用的难度，并没有从本质上减少所维护的状态，没有减少页面的DOM操作（框架替我们做了而已）。真正的DOM元素非常庞大，因为浏览器的标准把DOM设计的非常复杂，大多使用的是比较简单粗暴的插入、删除等操作，这对于比较“昂贵”的DOM，会产生一定的性能问题。
了解到DOM的一些弊端，人们就会思考对DOM进行优化的方法，于是聪明人提出了Virtual DOM的概念。本质上它是一种基于JavaScript的虚拟DOM技术，因为相对于DOM对象，JavaScript对象更简单，处理速度更快，DOM树的结构、属性等信息可以很容易地用JavaScript对象来表示。
我们通过JavaScript对象表示的树结构来构建一棵真正的DOM树，当数据状态发生变化时可以直接修改这个js对象，接着对比修改后的js对象，记录下需要对页面进行的dom操作，然后将其应用到真正的dom树，实现视图的更新。这个过程就是Virtual DOM的核心思想。