Real DOM(真实的DOM)
在页面渲染出的每个节点都是一个真实的DOM结构
<div class="root"> <h1>hello Real </h1> </div>
这个就是真实的dom
真实dom的优缺点?
优点:
1. 直接操作HTML,易用
缺点:
1. 解析速度慢,效率低,内存占用量高
2. 性能差:频繁操作真实DOM,导致重绘、回流
Virtual DOM(虚拟的DOM)
虚拟dom的优缺点?
<h1 className="hClass">hello world</h1>
这是虚拟dom的写法
JSX实际是一种语法糖,在使用过程中会被babel进行编译,转化成JS代码,上面的虚拟DOM转换如下:
const vDom = React.createElement('h1',{ {className:'hClass'}, 'hello world' )
他一共有三个参数
第一个参数是 标签名,例如h1、div等;
第二个参数是对象,里面存放着标签的一些属性,如class、id等;
第三个参数是节点中的文本
优点:
1. 减少真实dom的频繁更新,减少重绘回流、占用内存少
2. 跨平台:一套react代码可以多端运行
缺点:
1. 页面首次渲染时,由于多一层虚拟dom的计算,速度比正常慢些
两者的区别
1.虚拟dom不会进行重绘和回流,而真实dom会频繁重排与重绘
2.虚拟dom的总损耗是”虚拟dom的增删改+真实dom的差异增删改+重排“;真实dom的消耗是”真实dom全部增删改+重排“