Real DOM 和 Virtual DOM含义、区别、优缺点

1. 含义

1. Real DOM :(真实的DOM)

​ 在页面渲染出的每个节点都是一个真实的DOM结构，比如：

<div class="root">
	<h1>hello Real </h1>
</div>

2. Virtual DOM:(虚拟dom,本质是以js对象形式存在的，对DOM的描述)

Virtual DOM 是一个轻量级的js对象，它最初只是real DOM的副本，也是一个节点树，它将元素、它们的属性和内容作为该对象及其属性。

Virtual DOM（虚拟dom工作过程有3个步骤）：

• 每当底层数据发生变化时，整个UI都将在虚拟dom中重新渲染；
• 计算之前虚拟dom与新的虚拟dom之间的差异；
• 完成计算后，将只用实际更新的内容更新真实的DOM.

在react中，JSX可以让我们在js中通过使用XML的方式去直接声明界面的DOM结构：

const vDom  = <h1 className="hClass" id = "hId">hello world</h1>
const root = document.getElementById('root')
ReactDOM.render(vDom,root)
//ReactDOM.render() 用于将自己创建好的虚拟DOM节点插入到某个真实的节点上，并渲染到页面上

JSX实际是一种语法糖，在使用过程中会被babel进行编译，转化成JS代码，上面的虚拟DOM转换如下：

const vDom = React.createElement('h1',{
    {className:'hClass',id:'hId'},
     'hello world'
)

可以看到，JSX就是为了简化，直接调用React.createElement() 方法：

• 第一个参数是 标签名，例如h1、div等；
• 第二个参数是对象，里面存放着标签的一些属性，如class、id等；
• 第三个参数是节点中的文本

通过console.log(vDom),可以看到虚拟dom的消息，所以可以得到：JSX通过babel的方式转化成React.creatElement执行，返回值为一个对象，也就是虚拟dom！

2.区别：

1. 虚拟dom不会进行重绘和回流，而真实dom会频繁重排与重绘
2. 虚拟dom的总损耗是”虚拟dom的增删改+真实dom的差异增删改+重排“；真实dom的消耗是”真实dom全部增删改+重排“

3.优缺点

1.真实dom

​ 优点：

​ 1. 直接操作HTML，易用

​ 缺点：

​ 1. 解析速度慢，效率低，内存占用量高

​ 2. 性能差：频繁操作真实DOM，导致重绘、回流

2.虚拟dom

​ 优点：

​ 1. 减少真实dom的频繁更新，减少重绘回流、占用内存少

​ 2. 跨平台：一套react代码可以多端运行

​ 缺点：

​ 1. 页面首次渲染时，由于多一层虚拟dom的计算，速度比正常慢些