虚拟DOM/DOM DIFF理解

因为React、Vue框架的出现，页面渲染采用了更高效的虚拟DOM。

一个dom元素中有许多属性，操作dom是很耗资源的，而操作自定义的js对象是很高效。所以在操作dom之间多加一层“虚拟dom”，建立虚拟dom与dom的关联，把直接操作dom转换为操作虚拟dom，然后把最终的虚拟dom关联到dom上，关联的方式是把差异应用到dom上。

白话文讲述Virtual DOM

给予一个数据，根据这个数据生成一个全新的Virtual DOM，然后跟上一次生成的Virtual DOM去 diff，得到一个Patch，然后把这个Patch打到浏览器的DOM上去，即可完成页面的更新改变。

高效的原因

DOM是很慢的，因为其元素非常庞大，所以采用js去表示DOM结构，而且只保留了Element之间的层次关系和一些基本属性，所以JS所表示的DOM树结构更加高效。
即仅在DOM是很慢的，因为其元素非常庞大，，最终实现整个DOM树的更新。

虚拟DOM具体实现流程

1. 用javascript对象结构表示DOM树的结构；然后用这个树构建一个真正的DOM树，插到文档当中。
2. 当状态变更的时候，重新构造一颗新的对象树，然后用新的树和旧的树进行对比，记录两个树差异
3. 把2所记录的差异应用到步骤1所构建的真正DOM树中，视图就更更新了