化州市住房和建设局网站,建设一个直播网站要多少钱,ps网页版在线制作,舆情监测系统排名1. 是什么
Real DOM,真实DOM ,意思为文档对象模型#xff0c;是一个结构化文本的抽象#xff0c;在页面渲染出的每一个结点都是一个真实DOM结构#xff0c;如下#xff1a;
div idrooth1Hello World/h1
/divVirtual Dom,本质…1. 是什么
Real DOM,真实DOM ,意思为文档对象模型是一个结构化文本的抽象在页面渲染出的每一个结点都是一个真实DOM结构如下
div idrooth1Hello World/h1
/divVirtual Dom,本质上是以JavaScript对象形式存在的对DOM的描述 创建虚拟DOM目的就是为了更好将虚拟的节点渲染到页面视图中虚拟DOM对象的节点与真实DOM 的属性一—照应 在React中JSX是其一大特性可以让你在JS中通过使用XML的方式去直接声明界面的DOM结构
//创建h1标签右边千万不能加引号
const vDom h1Hello World/h1;
//找到div idroot/div节点const root document.getElementById(root);//把创建的h1标签渲染到root节点上
ReactDOM.render(vDom,root);上述中ReactDOM.render()用于将你创建好的虚拟DOM节点插入到某个真实节点上并渲染到页面上 JSX实际是一种语法糖在使用过程中会被babel进行编译转化成JS代码上述VDOM转化为如下
const vDom React.createElement(h1,{ className: hClass, id: Id },hello world
)可以看到JSX就是为了简化直接调用React.createElement()方法 第一个参数是标签名例如h1、span、table…第二个参数是个对象里面存着标签的一些属性例如id、class等第三个参数是节点中的文本 通过console.log(VDOM),则能够得到虚拟VDOM消息
所以可以得到]SX通过babel的方式转化成React.createElement执行返回值是一个对象也就是虚拟DOM
2. 区别
两者的区别如下
虚拟DOM不会进行排版与重绘操作而真实DOM会频繁重排与重绘虚拟DOM的总损耗是“虚拟DOM增删改真实DOM差异增删改排版与重绘”,真实DOM的总损耗是“真实DOM完全增删改排版与重绘”
传统的原生api或jQuery去操作DOM时浏览器会从构建DOM树开始从头到尾执行一遍流程 当你在一次操作时需要更新10个DOM节点浏览器没这么智能收到第一个更新DOM请求后并不知道后续还有9次更新操作因此会马上执行流程最终执行10次流程 而通过VNode,同样更新10个DOM节点虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地的一个js对象中最终将这个js对象一次性attach到DOM树上避免大量的无谓计算
3. 优缺点
真实DOM的优势
易用
缺点
效率低解析速度慢内存占用量过高性能差频繁操作真实DOM,易于导致重绘与回流
使用虚拟DOM的优势如下
简单方便如果使用手动操作真实DOM来完成页面繁琐又容易出错在大规模应用下维护起来也很困难性能方面使用Virtual DOM,能够有效避免真实DOM数频繁更新减少多次引起重绘与回流提高性能跨平台React借助虚拟DOM,带来了跨平台的能力一套代码多端运行
缺点
在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化首次渲染大量DOM时由于多了一层虚拟DOM的计算速度比正常稍慢
