虚拟dom

一、什么是虚拟DOM

1、虚拟DOM（virtual DOM）简称vdom，是一个普通的js对象，用来描述真实dom结构，因为它不是真实的DOM，所以称为虚拟DOM
2、属性：vdom具有三个属性
（1）tag：标签名
（2）attrs：属性
（3）children：子元素对象

3、虚拟DOM的设计思想
（1）提供一种方便的工具，使开发效率得到保证；
（2）保证最小化的DOM操作，使得执行效率得到保证

二、为什么引入虚拟DOM

1、原因一：真实的DOM运行是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的，真实的DOM节点，哪怕一个最简单的div也包含着很多属性，由此可见，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户的体验。

2、原因二：虚拟 dom 是相对于浏览器所渲染出来的真实 dom而言的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样这种方式相当消式行为或者结构，来达到更新 ui 的目的，耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom 树及其层级结构，那么每次 dom 的更改就变成了对 js 对象的属性的增删改查，这样一来查找 js 对象的属性变化要比查询 dom 树的性能开销小

3、原因三：创建真实DOM成本比较高，而如果用js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom

三、虚拟DOM优缺点

1、优点
虚拟DOM可以经过diff找出最小差异,然后批量进行patch,这种操作虽然比不上手动优化,但是比起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限
无需手动操作DOM: 虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率
跨平台:
虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发等等
2、缺点
无法进行极致优化: 在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化，比如VScode采用直接手动操作DOM的方式进行极端的性能优化

四、简单操作

方法：

class Element {
constructor( tagName,attrs,children) {this.tagName = tagName;
this.attrs= attrs ll {};this.children = children ll [ ];}
render ( ) {
//这个函数是用来生成真实DOM的，最后会把return的结果添加到页面中去}
}

应用： 

<ul id="list">
    <li class="a">txt_a</li>
    <li class="a ">txt_b</li>
</ul>
//创建Virtual Dom Tree
let ul = Element( 'ul', { id: 'list' }，
[
Element( 'li', { class: 'a' }，[ 'txt_a ' ]),
Element( 'li', { class: 'b'}，[ 'txt_b' ])
]);
let ulDom = ul.render( );//生成真实
Domdocument.body.appendChild( ulDom );

五、Virtual DOM 算法包括步骤

1、将DOM树转换成JS对象树，产生第一个虚拟DOM树（与真实DOM树一样）
2、数据发生变化时（当你有增删操作）产生第二个虚拟DOM树
3、diff算法逐层比较两个虚拟DOM树并标记增删操作（不会渲染）
4、将标记出来的差异（虚拟节点）应用到真正的 DOM 树，而不是将整个虚拟DOM树覆盖到真正的DOM树上 

总结：

虚拟DOM节省性能、开销小、提高开发效率、成本低，更方便的跨平台，不适合极致优化