面试官:什么是虚拟DOM?如何实现一个虚拟DOM?
故心故心故心故心小故冲啊
文章目录
- 一、什么是虚拟DOM
- 二、为什么需要虚拟DOM
- 三、如何实现虚拟DOM
- 小结
- 参考文献
一、什么是虚拟DOM
虚拟 DOM (Virtual DOM )这个概念相信大家都不陌生,从 React 到 Vue ,虚拟 DOM 为这两个框架都带来了跨平台的能力(React-Native 和 Weex)
实际上它只是一层对真实DOM的抽象,以JavaScript 对象 (VNode 节点) 作为基础的树,用对象的属性来描述节点,最终可以通过一系列操作使这棵树映射到真实环境上
在Javascript对象中,虚拟DOM 表现为一个 Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性,不同框架对这三个属性的名命可能会有差别
创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中,所以虚拟DOM对象的节点与真实DOM的属性一一照应
在vue中同样使用到了虚拟DOM技术
定义真实DOM
<div id="app"><p class="p">节点内容</p><h3>{{ foo }}</h3>
</div>
实例化vue
const app = new Vue({el:"#app",data:{foo:"foo"}
})
观察render的render,我们能得到虚拟DOM
(function anonymous() {with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},[_v("节点内容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})
通过VNode,vue可以对这颗抽象树进行创建节点,删除节点以及修改节点的操作, 经过diff算法得出一些需要修改的最小单位,再更新视图,减少了dom操作,提高了性能
二、为什么需要虚拟DOM
DOM是很慢的,其元素非常庞大,页面的性能问题,大部分都是由DOM操作引起的
真实的DOM节点,哪怕一个最简单的div也包含着很多属性,可以打印出来直观感受一下:
由此可见,操作DOM的代价仍旧是昂贵的,频繁操作还是会出现页面卡顿,影响用户的体验
举个例子:
你用传统的原生api或jQuery去操作DOM时,浏览器会从构建DOM树开始从头到尾执行一遍流程
当你在一次操作时,需要更新10个DOM节点,浏览器没这么智能,收到第一个更新DOM请求后,并不知道后续还有9次更新操作,因此会马上执行流程,最终执行10次流程
而通过VNode,同样更新10个DOM节点,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地的一个js对象中,最终将这个js对象一次性attach到DOM树上,避免大量的无谓计算
很多人认为虚拟 DOM 最大的优势是 diff 算法,减少 JavaScript 操作真实 DOM 的带来的性能消耗。虽然这一个虚拟 DOM 带来的一个优势,但并不是全部。虚拟 DOM 最大的优势在于抽象了原本的渲染过程,实现了跨平台的能力,而不仅仅局限于浏览器的 DOM,可以是安卓和 IOS 的原生组件,可以是近期很火热的小程序,也可以是各种GUI
三、如何实现虚拟DOM
首先可以看看vue中VNode的结构
源码位置:src/core/vdom/vnode.js
export default class VNode {tag: string | void;data: VNodeData | void;children: ?Array<VNode>;text: string | void;elm: Node | void;ns: string | void;context: Component | void; // rendered in this component's scopefunctionalContext: Component | void; // only for functional component root nodeskey: string | number | void;componentOptions: VNodeComponentOptions | void;componentInstance: Component | void; // component instanceparent: VNode | void; // component placeholder noderaw: boolean; // contains raw HTML? (server only)isStatic: boolean; // hoisted static nodeisRootInsert: boolean; // necessary for enter transition checkisComment: boolean; // empty comment placeholder?isCloned: boolean; // is a cloned node?isOnce: boolean; // is a v-once node?constructor (tag?: string,data?: VNodeData,children?: ?Array<VNode>,text?: string,elm?: Node,context?: Component,componentOptions?: VNodeComponentOptions) {/*当前节点的标签名*/this.tag = tag/*当前节点对应的对象,包含了具体的一些数据信息,是一个VNodeData类型,可以参考VNodeData类型中的数据信息*/this.data = data/*当前节点的子节点,是一个数组*/this.children = children/*当前节点的文本*/this.text = text/*当前虚拟节点对应的真实dom节点*/this.elm = elm/*当前节点的名字空间*/this.ns = undefined/*编译作用域*/this.context = context/*函数化组件作用域*/this.functionalContext = undefined/*节点的key属性,被当作节点的标志,用以优化*/this.key = data && data.key/*组件的option选项*/this.componentOptions = componentOptions/*当前节点对应的组件的实例*/this.componentInstance = undefined/*当前节点的父节点*/this.parent = undefined/*简而言之就是是否为原生HTML或只是普通文本,innerHTML的时候为true,textContent的时候为false*/this.raw = false/*静态节点标志*/this.isStatic = false/*是否作为跟节点插入*/this.isRootInsert = true/*是否为注释节点*/this.isComment = false/*是否为克隆节点*/this.isCloned = false/*是否有v-once指令*/this.isOnce = false}// DEPRECATED: alias for componentInstance for backwards compat./* istanbul ignore next https://github.com/answershuto/learnVue*/get child (): Component | void {return this.componentInstance}
}
这里对VNode进行稍微的说明:
所有对象的 context 选项都指向了 Vue 实例
elm 属性则指向了其相对应的真实 DOM 节点
vue是通过createElement生成VNode
源码位置:src/core/vdom/create-element.js
export function createElement (context: Component,tag: any,data: any,children: any,normalizationType: any,alwaysNormalize: boolean
): VNode | Array<VNode> {if (Array.isArray(data) || isPrimitive(data)) {normalizationType = childrenchildren = datadata = undefined}if (isTrue(alwaysNormalize)) {normalizationType = ALWAYS_NORMALIZE}return _createElement(context, tag, data, children, normalizationType)
}
上面可以看到createElement 方法实际上是对 _createElement 方法的封装,对参数的传入进行了判断
export function _createElement(context: Component,tag?: string | Class<Component> | Function | Object,data?: VNodeData,children?: any,normalizationType?: number
): VNode | Array<VNode> {if (isDef(data) && isDef((data: any).__ob__)) {process.env.NODE_ENV !== 'production' && warn(`Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +'Always create fresh vnode data objects in each render!',context`)return createEmptyVNode()}// object syntax in v-bindif (isDef(data) && isDef(data.is)) {tag = data.is}if (!tag) {// in case of component :is set to falsy valuereturn createEmptyVNode()}... // support single function children as default scoped slotif (Array.isArray(children) &&typeof children[0] === 'function') {data = data || {}data.scopedSlots = { default: children[0] }children.length = 0}if (normalizationType === ALWAYS_NORMALIZE) {children = normalizeChildren(children)} else if ( === SIMPLE_NORMALIZE) {children = simpleNormalizeChildren(children)}// 创建VNode...
}
可以看到_createElement接收5个参数:
context 表示 VNode 的上下文环境,是 Component 类型
tag 表示标签,它可以是一个字符串,也可以是一个 Component
data 表示 VNode 的数据,它是一个 VNodeData 类型
children 表示当前 VNode的子节点,它是任意类型的
normalizationType 表示子节点规范的类型,类型不同规范的方法也就不一样,主要是参考 render 函数是编译生成的还是用户手写的
根据normalizationType 的类型,children会有不同的定义
if (normalizationType === ALWAYS_NORMALIZE) {children = normalizeChildren(children)
} else if ( === SIMPLE_NORMALIZE) {children = simpleNormalizeChildren(children)
}
simpleNormalizeChildren方法调用场景是 render 函数是编译生成的
normalizeChildren方法调用场景分为下面两种:
render 函数是用户手写的
编译 slot、v-for 的时候会产生嵌套数组
无论是simpleNormalizeChildren还是normalizeChildren都是对children进行规范(使children 变成了一个类型为 VNode 的 Array),这里就不展开说了
规范化children的源码位置在:src/core/vdom/helpers/normalzie-children.js
在规范化children后,就去创建VNode
let vnode, ns
// 对tag进行判断
if (typeof tag === 'string') {let Ctorns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)if (config.isReservedTag(tag)) {// 如果是内置的节点,则直接创建一个普通VNodevnode = new VNode(config.parsePlatformTagName(tag), data, children,undefined, undefined, context)} else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {// component// 如果是component类型,则会通过createComponent创建VNode节点vnode = createComponent(Ctor, data, context, children, tag)} else {vnode = new VNode(tag, data, children,undefined, undefined, context)}
} else {// direct component options / constructorvnode = createComponent(tag, data, context, children)
}
createComponent同样是创建VNode
源码位置:src/core/vdom/create-component.js
export function createComponent (Ctor: Class<Component> | Function | Object | void,data: ?VNodeData,context: Component,children: ?Array<VNode>,tag?: string
): VNode | Array<VNode> | void {if (isUndef(Ctor)) {return}// 构建子类构造函数 const baseCtor = context.$options._base// plain options object: turn it into a constructorif (isObject(Ctor)) {Ctor = baseCtor.extend(Ctor)}// if at this stage it's not a constructor or an async component factory,// reject.if (typeof Ctor !== 'function') {if (process.env.NODE_ENV !== 'production') {warn(`Invalid Component definition: ${String(Ctor)}`, context)}return}// async componentlet asyncFactoryif (isUndef(Ctor.cid)) {asyncFactory = CtorCtor = resolveAsyncComponent(asyncFactory, baseCtor, context)if (Ctor === undefined) {return createAsyncPlaceholder(asyncFactory,data,context,children,tag)}}data = data || {}// resolve constructor options in case global mixins are applied after// component constructor creationresolveConstructorOptions(Ctor)// transform component v-model data into props & eventsif (isDef(data.model)) {transformModel(Ctor.options, data)}// extract propsconst propsData = extractPropsFromVNodeData(data, Ctor, tag)// functional componentif (isTrue(Ctor.options.functional)) {return createFunctionalComponent(Ctor, propsData, data, context, children)}// extract listeners, since these needs to be treated as// child component listeners instead of DOM listenersconst listeners = data.on// replace with listeners with .native modifier// so it gets processed during parent component patch.data.on = data.nativeOnif (isTrue(Ctor.options.abstract)) {const slot = data.slotdata = {}if (slot) {data.slot = slot}}// 安装组件钩子函数,把钩子函数合并到data.hook中installComponentHooks(data)//实例化一个VNode返回。组件的VNode是没有children的const name = Ctor.options.name || tagconst vnode = new VNode(`vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,data, undefined, undefined, undefined, context,{ Ctor, propsData, listeners, tag, children },asyncFactory)if (__WEEX__ && isRecyclableComponent(vnode)) {return renderRecyclableComponentTemplate(vnode)}return vnode
}
稍微提下createComponent生成VNode的三个关键流程:
- 构造子类构造函数Ctor
- installComponentHooks安装组件钩子函数
- 实例化 vnode
小结
createElement 创建 VNode 的过程,每个 VNode 有 children,children 每个元素也是一个VNode,这样就形成了一个虚拟树结构,用于描述真实的DOM树结构
参考文献
https://ustbhuangyi.github.io/vue-analysis/v2/data-driven/create-element.html#children-%E7%9A%84%E8%A7%84%E8%8C%83%E5%8C%96
https://juejin.cn/post/6876711874050818061
面试官:什么是虚拟DOM?如何实现一个虚拟DOM?相关推荐
- 面试官不讲码德,欺负我一个年轻的开发工程师
面试官不讲码德,欺负我一个年轻的开发工程师,问如果是你怎么设计RPC? RPC也不是很难啊,教你如何使用socket加动态代理与反射实现Rpc 先来解释解释一下rpc,首先很多人以为rpc是一种协议, ...
- 关于抢红包的_面试官让我5分钟内写一个抢红包程序,我和他说了半小时原理!...
更多原创文章在微信公众号「后端技术学堂」转载请先与我联系,点文末链接「了解更多」 今年春节响应国家号召在家宅着抵抗疫情,拜年也改用微信红包,春节发了很多也抢了很多微信红包,也算支持了公司业务,微信支付 ...
- 申请服务器就是申请虚拟主机吗,申请一个虚拟主机和云主机哪个更好呢?
最近几年, 我们来了解一下云主机和虚拟主机是一个什么样的概念吧! 云主机相当于是一台独立的虚拟 虚拟主机又叫空间,它是利用虚拟化技术在服务器硬盘上划分出来的一部分容量.共享的服务器IP以及带宽等资源, ...
- php设置虚拟域名,如何开发一个虚拟域名系统
如何开发一个虚拟域名系统 更新时间:2006年10月09日 00:00:00 作者: 大家在使用诸如yourname.yeah.net这样的简记域名时都感到十分方便,有很多人在想:我要是能让自己的 ...
- 线程停止继续_晓龙吊打面试官系列: 如何优雅的停止一个线程
一.什么时候我们需要中断一个线程 在实际的开发中,有很多场景需要我们中断一个正在运行的线程,就比如: 当我们使用抢票软件时,其中某一个通道已经抢到了火车票,这个时候我们就需要通知其他线程停止工作. 当 ...
- 什么鬼,面试官竟然让我用Redis实现一个消息队列!!?
GitHub 9.4k Star 的Java工程师成神之路 ,不来了解一下吗? GitHub 9.4k Star 的Java工程师成神之路 ,真的不来了解一下吗? GitHub 9.4k Star 的 ...
- 面试官竟让我用Redis实现一个消息队列!
来自公众号:Hollis >>>千人线上直播活动报名倒计时(今晚20:00): 从Oracle出发,走进GaussDB的世界 众所周知,redis是一个高性能的分布式key-valu ...
- 面试官问我会canvas? 我可以绘制一个烟花动画
前言 在我们日常开发中贝塞尔曲线无处不在: svg 中的曲线(支持 2阶. 3阶) canvas 中绘制贝塞尔曲线 几乎所有前端2D或3D图形图表库(echarts,d3,three.js)都会使用到 ...
- 我和面试官之间关于操作系统的一场对弈 | 原力计划
作者 | Guide哥 责编 | 伍杏玲 出品 | CSDN博客 大家好,我是 Guide 哥!很多读者抱怨计算操作系统的知识点比较繁杂,自己也没有多少耐心去看,但是面试的时候又经常会遇到.所以,我带 ...
- 面试官:我就问了一个JVM,没想到他能吹半个小时
前言: 作为 Java 的从业者,在找工作的时候,一定会被问及关于 JVM 相关的知识. JVM知识的掌握程度,在很多面试官眼里是候选人技术深度的一个重要评判标准. 在这里我们将详细的整理常见的 JV ...
最新文章
- ACL 2022丨香港大学华为诺亚方舟新工作:生成式预训练语言模型的量化压缩
- RDKit | 基于RDKit的单分子多构象生成
- Universal Viewer Pro中文版
- 阿里云开源业内首个应用多活项目 AppActive,与社区共建云原生容灾标准
- 机器视觉 · 立体相机
- VTK修炼之道50:图形基本操作进阶_网格模型的特征边 与 封闭性检测
- 浅析Java各种变量线程安全问题
- 第四周课程总结试验报告(二)
- ubuntu64位(x86)下科大讯飞sdk使用注意事项
- 完美解决Python套接字编程时TCP断包与粘包问题
- 数据增量更新定义_技术资讯 | TiDB在准实时数据仓库中的实践
- Advanced+Apple+Debugging(2)
- 华为云盘里面的照片怎么导出来_华为手机误删照片,怎么恢复?别急!只需点击这里...
- 数电educoder的verilog参考答案
- 从零开始搭建我的网上商城 - Pika商城
- word多级目录设置和自动生成目录
- 华为asph是什么型号_华为triple camera这是什么型号
- 内涵外延发生巨变的嵌入式技术,未来如何发展?
- Pygame制作音乐播放器
- Simulink建模:一阶滤波模型
热门文章
- 计算机控制运行内存,运行内存
- 33款可用来抓数据的开源爬虫软件工具
- 数据采集时总提示未登录_做电商必须学会这一招!教你用爬虫工具免费采集网易考拉商品数据...
- 华为手机摄影从入门到精通_华为手机拍照技巧从入门到精通
- elementUI的input使用扫描枪,回显值后重新刷新页面
- 江在川上曰:JS函数
- 线程的两种实现,为什么使用runnable接口的居多
- 涂鸦画板,监听touch事件,手机端
- linux临时配置mac地址,Linux获取网卡型号、mac地址、修改IP地址的几种方法
- Windows7SP1补丁包(Win7补丁汇总) 32位/64位版 更新截至2016年11月