构建一个虚拟DOM并转换为真实DOM

关于真实DOM与虚拟DOM

1.在学习虚拟DOM之前，让我们先来了解一下真实的DOM结构，这里不得不提的是关于浏览器渲染方面的知识。

      当浏览器拿到一个HTML文件，首先会根据HTML文件构建出一个DOM树来，并行加载CSS文件，图片，JS脚
 本，值得注意的是DOM树的渲染和CSSOM渲染是并行执行的，而不是串行进行的。
    （JS脚本需要在html尾部加载，或是写入window.onload方法里，让DOM加载完成后再去加载JS脚本，防止
 进程阻塞，JS脚本是同步加载的）。
 	 在构建完DOM树和CSSOM树之后，即可开始Render Tree即渲染树的构建，进行布局，绘制。

2.为什么要使用虚拟DOM？

	当我们对DOM树有大量操作时，每一次操作都会进行重新渲染。虚拟DOM是构建一个虚拟的DOM树，将多个
改变反应到虚拟DOM树中去，等页面更新完成后，打包对真实DOM进行操作。这样子就可以降低回流或重绘的次数
提高性能。

3.构建一个虚拟DOM

一个ELement对象相当于虚拟DOM上一个节点，参数如下：

1. tagName：元素名称
2. props : 元素属性，例如：class title等（以键值对方式存在）
3. children : 该节点下的子节点数组

现在我们来定义一个虚拟DOM树

4.将虚拟DOM映射为真实DOM

    为Element对象添加原型方法，render函数。函数作用：将虚拟DOM树映射为真实DOM。这里使用了深度优先DFS
算法进行节点的遍历。

5.最后一步，将创建的真实DOM添加入文档流中。

6.显示效果

总结：虚拟DOM在框架如VUE，React中的运用，保证了性能下限，虚拟DOM是JS对象的抽象化，具有更好的跨平台性，无需手动对DOM进行操作。对于框架而言，是提供一个普适化的解决方案。使用虚拟DOM在保证代码的可维护性下，提供一个不错的性能。

对于一些对性能要求极高的平台，如VScode，采用手动优化DOM的操作进行极端的性能优化