真实DOM和虚拟DOM

1、什么是DOM

DOM就是文档对象模型【就是一个节点树】，HTML的文档document页面是一切的基础，没有它dom就无从谈起。

当我们创建好一个页面并加载到浏览器的时候，DOM就悄然而生，它会把网页文档转换为一个文档对象，主要功能就是处理网页内容。在这个文档给对象里，所有元素呈现出一种层次，就是除了顶级元素html外，其他元素都被包含在另外的元素中。

2、什么是虚拟DOM

虚拟DOM是一个轻量级的JavaScript对象，它原本是真实dom的副本，是一个节点树，它将元素，它们的属性和内容作为对象及属性。渲染页面时会创建一个节点树，然后响应数据模型中的变化来更新该树，该变化是用户或系统完成的各种动作引起的。

3、虚拟DOM的工作流程

1.首先根据数据创建虚拟dom,它反映真实DOM的结构，然后由虚拟dom创建真实的dom树，真实dom树生成之后，在渲染到页面上。
2.如果数据发生改变，创建新的虚拟dom树，比较两个树的区别，调整虚拟dom的内部状态
3.在虚拟dom收集到足够的改变时，再一次性应用到真实dom上，渲染到页面。

<!-- 准备好一个容器 -->
<div id="test">
</div>
​
 <!-- 引入react核心库 -->
 <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 <!-- 引入react-dom，用于支持react操作dom -->
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
​
 <script type="text/javascript">
        //获取真实dom
        var TDOM = document.getElementById('test')
        console.log('真实dom', TDOM)
        //1、创建虚拟dom
        const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'hello react'))
        //2、渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById('test'))
        console.log('虚拟dom', VDOM)
 </script>

4、虚拟DOM的优点和缺点

优点：
    保证性能下限
    无须手动操作dom
    跨平台
缺点：
    无进行极致优化
    首次渲染大量DOM时，由于多了一层dom计算会比innerHTMl插入慢

5、真实DOM和虚拟DOM的区别？

(1)、虚拟dom不会进行排版与重绘操作，虚拟dom就是把真实DOM转换为javaScript代码
(2)、虚拟dom进行频繁修改，然后一次性比较并修改真实DOM中需要修改的部分，最后真实DOM进行排版重绘，减少节点排版与重绘损耗