面试题: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无法进行针对性的优化。

相关推荐
RoyLin1 分钟前
TypeScript设计模式:策略模式
前端·后端·typescript
brzhang11 分钟前
为什么说低代码谎言的破灭,是AI原生开发的起点?
前端·后端·架构
小桥风满袖1 小时前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang1 小时前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户73087011793081 小时前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
前端人类学1 小时前
掌控异步洪流:多请求并发下的顺序控制艺术
javascript·promise
李重楼1 小时前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu1 小时前
全屏滚动网站PC端自适应方案
前端
RoyLin1 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者1 小时前
Vue中实现Word、Excel、PDF预览的详细步骤
前端