虚拟DOM
1.1 虚拟DOM是什么？
虚拟DOM本质上是一个能代表DOM树的对象，通常含有标签名，标签名上的属性，监听事件和子元素们以及他们的属性
1.2 虚拟DOM的优点？
1.2.1 减少DOM操作
虚拟DOM可将多次操作合并成一次完成，比如：当需要添加1000个节点时，真实DOM需要一个一个的添加，但是虚拟DOM比如vue可以将多个节点放在一个页面一次性添加。
虚拟DOM可以借助DOM diff将多余的操作省掉，比如需要添加1000个节点，但是只有10个节点是新增的，虚拟DOM可以通过diff算法，实现只对新增的10个节点进行添加，其他节点不需要任何改动。
1.2.2 实现跨平台渲染
虚拟DOM不仅可以变成DOM，还可以变成小程序，IOS应用
1.3 虚拟DOM的缺点？
唯一的不足是需要额外的创建函数来创建DOM树
1.3.1 Vue和React中的虚拟DOM
1.3.2 Vue和React中的创建虚拟DOM
DOM diff
2.1 DOM diff是什么？
是一种函数，是虚拟DOM的对比算法
2.1.1 Tree diff
概念: 将新旧两颗虚拟 DOM 树,按照层级对应的关系,从头到尾的遍历一遍,,就能找到那些元素是需要更新的,这种方式: Tree Diff
2.1.2 Component diff
不同组件之间的对比 概念: 在对比每一个层级的时候,会有自己的组件,这种组件的对比方式就叫: Component Diff ;
 ​           这种对比方法其实比较的就是类型.↓↓↓
 如果类型相同,暂时不更新,
 如果类型不相同,就需要更新;   (  删除旧的组件,再创建一个新的组件,插入到删除组件的那个位置)
2.1.3 Element diff
同一层级中元素之间的对比
概念: 在类型相同的组件内, 再继续对比组件内部的元素,查看内部元素是否相同,如果需要修改,找到需要修改的元素,进行针对性的修改! 这种方式就叫: Element Diff
三种节点操作：
1 INSERT_MARKUP（插入） 
2 MOVE_EXISTING（移动） 
3 REMOVE_NODE（删除） 
 INSERT_MARKUP：新的 component 类型不在老集合里，需要对新节点执行插入操作。
 MOVE_EXISTING：老的集合包含新的 component 类型，就需要做移动操作，可以复用以前的 DOM 节点。 
 REMOVE_NODE：老的 component 不在新集合里的，需要执行删除操作 或者 老的 component 类型在新集合里也有，但对应的 element 不同则不能直接复用和更新，需要执行删除操作
2.2 DOM diff的优点？
DOM diff算法通过将新的DOM树和旧的DOM树进行比较，只对变化了的部分进行渲染，大大提高了渲染效率
2.3 DOM diff的问题？
需要通过key：id来指定节点
我们在执行操作的时候，只对数组进行了操作，即每一条 Child，而并没有对 Child 的子元素进行操作。而数组的对比是由遍历来的，所以大概的过程就成了下图这样，也就形成了上图的结果
为了避免这种情况的出现了，React 和 VUE 允许开发者对同一层级的同组子节点，添加唯一 key 进行区分，出现了下面这种情况，这次就对了

虚拟 DOM 和 DOM diff
虚拟DOM
虚拟DOM的优点
虚拟DOM的缺点
DOM diff
DOM diff优点
DOM diff缺点

虚拟DOM
一个能代表DOM树的对象，通常包含标签名、标签上的属性、事件监听、子元素，以及其他属性
虚拟DOM的优点

能减少不必要的DOM操作
能跨平台渲染
记住：虚拟DOM和实际DOM的操作，作比较时，要有具体的例子。实际上实际的DOM操作并不慢，但是很多教科书和资料介绍说DOM操作慢，这个说法太片面

虚拟DOM的缺点
需要额外的创建函数，如createElement或h,但是可通过JXS来简化XML写法
DOM diff

虚拟DOM的对比算法
把虚拟DOM想象成树型
举例一

<div :class="x">
    <span v-if="y">{string1}</span>
    <span>{string2}</span>
</div>




当数据变化，x从red变为green




此时DOM diff发现：

div标签类型没变，只需要更新div对应的DOM的属性。
子元素没变不更新



举例二

当数据变化，y从true变为false



DOM diff发现：

div没变，不用更新。

子元素1标签没变，但是children变了，更新DOM 内容

子元素2不见了，删除对应的DOM


DOM diff优点

进行同级比较
可以跨平台

DOM diff缺点

同级比较存在bug
解决方案：用Key值进行区分。

虚拟DOM和DOMdiff
什么是虚拟DOM：
一个能代表DOM数的对象，通常含有标签名，标签上的属性，时间监听和子元素们，以及其他属性。
eg:创建一个虚拟DOM
createElement('div',{className:'red',onClick:()=>{}},[						createElement('span',{},'span1')])
	createElement('span',{},'span1')])
	]
)

虚拟DOM的优点


减少DOM操作
虚拟DOM可以将多次操作合并为一次操作，比如要添加1000个节点，DOM要操作1000次，但是虚拟DOM一次就可以了，虚拟DOM其实是在优化操作，而不是优化性能。
虚拟DOM借助DOM diff可以把多余的操作省掉，比如添加1000个节点，其实只有10个是新增的，那么虚拟DOM就会只更新10个节点。这一次虚拟DOM是在减少操作的范围


跨平台
虚拟DOM不仅可以变成DOM，还可以变成小程序、IOS应用、安卓应用，因为虚拟DOM本质上就是一个JS对象。


虚拟DOM的缺点
需要额外的创建函数，如createElement或h,但是可以通过JSX来简化成XML写法（这种方法严重依赖于打包工具）。
当规格比较小时，虚拟DOM比DOM快，但是当规模比较大时，DOM会更快。
什么是DOM diff
DOM diff的大概逻辑

Tree diff

将新旧两棵树进行逐层对比，找出哪些节点需要更新
如果节点是组件就看Cpmponent diff
如果节点是标签就看 Element diff


Component diff

如果节点是组件，就先看组件类型
类型不同直接替换，（删除旧的）
类型相同只更新属性
然后深入组件做Tree diff（递归）


Element diff

如果节点是原生标签，则看标签名
标签名不同直接替换，相同则只改变属性
然后进入标签后做Tree diff(递归)

react 虚拟dom的优点：
数据渲染到页面的方式：
 1）.手动for循环整个数组；
 2）.使用模板引擎；
 缺点：性能上的问题比较严重 列如：列表的排序等，需要重新渲染页面的某个需求，重新渲染页面的性能。

如何提高性能？
 按需渲染：只更新数据变化的那一条数据（DOM树）。
 原理：获取内存中的新旧两颗DOM树，进行对比，把数据发生变化的进行按需更新

如何获取新旧两颗DOM树？实现对比？
 因为浏览器中并没有直接提供获取DOM树的api；因此我没无法拿到浏览器内存中的DOM树；所以只能手动模拟DOM树;
 
怎么模拟DOM树？
 利用js：其实也是面向对象思想。比如我们要模拟
 '<div class="testDiv" name="我是DIV">我是div<h1>嵌套H1</h1><div>' 
 /*模拟部分*/
 var div = {
     tagName:'div',
     attrs:{
         class:'testDIv',
         name:'我是DIV'
     },
     childrens:[
         "我是DIV",
          {
            tagName:'h1',
            attrs:{},
            childrens:[
                '嵌套H1'
            ]
          }  
     ]
 }   
 /*如果部分数据发生更新*/
  var div = {
     tagName:'div',
     attrs:{
         class:'testDIv',
         name:'我是DIV'
     },
     childrens:[
         /*这条数据发生变话。只需要标记这条数据即可*/
         "我是DIV1231231231231231231231231",
          {
            tagName:'h1',
            attrs:{},
            childrens:[
                '嵌套H1'
            ]
          }  
     ]
 }   
以上就是react的虚拟dom的原理和优点； （本质：就是利用js对象的行为来模拟页面上DOM的嵌套关系就是虚拟DOM）从而实现高效更新；

怎么实现对比呢？
 Diff算法；
 tree diff：新旧两颗DOM树逐层对比的过程就是Tree Diff；当整颗DOM树对比完毕，则所有需要更新的元素，必然能够找到。 （组件对比-每一层的对比（component diff）），元素对比（element diff））；