前端问答社区

什么是虚拟DOM?

Javan 发布于 7个月前 分类:Vue

Virtual DOMRect/Vue等框架实现的虚拟DOM,其本质上是JavaScript对象,用于模拟DOM对象,在需要操作DOM的地方,先操作Virtual DOM,再render到真实DOM上,以达到更好的性能。

虚拟 dom 是相对于浏览器所渲染出来的真实 dom,在reactvue等技术出现之前,我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构,来达到更新 ui 的目的。

这种方式相当消耗计算资源,因为每次查询 dom 几乎都需要遍历整颗 dom 树,如果建立一个与 dom 树对应的虚拟 dom 对象( js 对象),以对象嵌套的方式来表示 dom 树,那么每次 dom 的更改就变成了 js 对象的属性的更改,这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。

VNode是真实DOM的映射,其数据结构是普通JS对象,包含type(类型,是组件还是元素),styleclasschildren(子组件或子元素),data(数据模型)等属性,以树的形式嵌套。—

回复

共0条回复 我来回复
  • 暂无回复内容