面试题:React的真实DOM和虚拟DOM的区别

真实DOM,就是文档对象类型,在页面上渲染的每一个节点都是一个真实DOM结构。

虚拟DOM,就是一个描述描述DOM结构的对象。

在创建虚拟DOM的目的就是为了更好将虚拟节点渲染到页面上,虚拟DOM对象的节点与真实DOM的属性是一一对应的。

在React中,ReactDOM.render()函数将虚拟DOM节点插入到真实DOM节点上,并且渲染到页面上。

虚拟DOM和真实DOM的区别:

  1. 虚拟DOM不会进行重排和重绘,操作真实DOM的时候,会频繁触发重排和重绘;
  2. 虚拟DOM的总消耗性能为:虚拟DOM的增删改、真实DOM差异增删改和重排重绘;真实DOM性能消耗为真实DOM增删改加上重排重绘;

如果是原生JavaScript来操作DOM,浏览器会从构建DOM开始,从头到尾执行一遍流程。比如在操作一次,需要更新10个DOM节点,那么浏览器会执行10次流程。

然而通过虚拟DOM来完成的话,同样的更新10个节点,虚拟DOM不会马上操作DOM,而是把10次更新的diff内容保存在本地内存的一个js对象上,最后才把这个js对象转化为真实DOM。

虚拟DOM与真实DOM的优缺点:

真实DOM容易理解,但是开发效率低,体验差;

虚拟DOM是使用,提升了开发效率和体验,同时实现跨平台能力,一套代码多端运行。缺点是在一些性能要求极高的应用中,虚拟DOM无法进行针对性的优化。

相关推荐
Sailing7 小时前
👉 👉 Vue3 自定义 Hook:从入门到进阶(~~安静的阅读2分钟,相信我,这篇文章一定能给你启发)
前端·javascript·vue.js
南雨北斗7 小时前
Vue3 v-html的用法
前端
爱学习的茄子7 小时前
Function Call:让AI从文本生成走向智能交互的技术革命
前端·深度学习·openai
aol1217 小时前
X6官方示例「数据加工DAG图」转为Vue版
前端·vue.js
南雨北斗7 小时前
vue3 attribute绑定
前端
一枚前端小能手7 小时前
🚀 主线程卡死用户要骂娘?Web Worker让你的应用丝滑如德芙
前端·javascript
小桥风满袖7 小时前
极简三分钟ES6 - Promise
前端·javascript
breeze_whisper7 小时前
当前端收到一个比梦想还大的数字:BigInt处理指南
前端·面试
小喷友7 小时前
阶段四:实战(项目开发能力)
前端·rust
小高0077 小时前
性能优化零成本:只加3行代码,FCP从1.8s砍到1.2s
前端·javascript·面试