虚拟DOM，你真的了解了吗？

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文

一、如何理解虚拟 DOM

首先，我们要明确知道，虚拟DOM是由react团队提出来的

1、官网上有说明，虚拟DOM是一种编程概念，意思就是将我们实际看到的UI以一种理想化的或者虚拟的表现形式保存在内存中

2、也就是我们可以用一种方式，能够将真实DOM的层次结构描述出来，那么就算一个虚拟DOM；比如在react中，我们用js对象来对DOM结构进行描述

3、虚拟DOM是一种思想，在react中，我们用js对象是对这个思想的具体实现

二、为什么需要虚拟DOM

1.相较于DOM的体积优势和速度优势

首先，我们要清楚，js层面的计算速度要比DOM层面的计算要快

1. DOM对象最终要被浏览器渲染出来之前，浏览器会有很多工作要做
2. DOM对象上面的属性也非常非常多

代码如下（示例）：

      console.time();
      const arr = [];
      for (let i = 0; i++; i < 100000) {
        arr.push(document.createElement("div"));
      }
      console.timeEnd();

      console.time();
      const arr2 = [];
      for (let i = 0; i++; i < 100000) {
        arr.push({
          type: "div",
        });
      }
      console.timeEnd();

所以我门看出来，操作JS对象的时间和操作DOM的时间完全是不一样的；

但是我们仔细想下，虽然我们使用了虚拟DOM，但最终还不是要使用DOM API去操作DOM吗？

实际上，我们页面首次渲染的时候，虚拟DOM根本没有优势，因为有js层面的计算的计算时间，速度肯定比直接操作DOM的要慢，虚拟DOM真正体现的优势是在更新阶段

你比如说下面这块代码在首次渲染的时候：

1、先要解析字符串

2、创建对应的dom节点

在更新的时候：

要全部销毁重新赋值，之前的dom节点全部销毁，重新创建

但是我们引入虚拟dom后，只需要更新必要的dom节点就可以

 document.getElementById("p").innerHTML = `
      <div>
        <p>1111</p>  
      </div>
      `;

2.多平台的渲染能力

UI=fn(state)

1、根据自变量的变化计算出UI

2、根据UI的变化执行具体的宿主环境的API

虚拟DOM只是对真实UI的一个描述，然后根据不同的宿主环境，执行不同的渲染代码